@charset "utf-8";
/* CSS Document */

/* LP Layout CSS Ver.2.20 */

/*********************************************************************/
/** for SMARTPHONE layout ********************************************/
/*********************************************************************/

* {box-sizing: border-box;font-family: 'Noto Serif JP', sans-serif;/*font-family: 'Noto Sans JP', sans-serif;*/}

/*.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}*/

/***************************/

body {width: 100%;background:#FFF;overflow-x: hidden;}
img {width: 100%;}

.headLogo {width:auto;height:12px;position:fixed; top:20px;right:15px;z-index:9998;}

.headbg {width:100%; height:50px;position: fixed;top:0;left:0;background:rgba(0,0,0,.5);
mix-blend-mode:multiply;}

/***************************/

#main {height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: #000;
background-image: url("../images/takumi_mainbg.jpg");
}

#main .imagebox {width:360px;height:800px;position: relative;
top:50%;left:50%;transform: translate(-50%,-50%);
}

#main img.main_img1 {
width: 180px;position: absolute;top: 120px;left: 10px;z-index: 999;

animation-name:fadeInAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
from {opacity: 0;}
to {opacity: 1;}
}

#main img.main_img2 {mix-blend-mode:screen;
width:320px;position: absolute;top: 300px;left: 30px;z-index: 1;}

#main img.main_img3 {
width:160px;position: absolute;top: 280px;left: 20px;z-index: 999;
animation-name:slideIn2;
animation-duration:1.0s;
animation-fill-mode:forwards;
}

@keyframes slideIn2 {
0% {transform: translateY(10px);opacity: 0;}
100% {transform: translateY(0);opacity: 1;}
}



#main img.main_pin1 {width:110px;position: absolute;top: 520px;left: 5px;z-index: 999;
animation-name:slideIn;
animation-duration:1.0s;
animation-fill-mode:forwards;
}

#main img.main_pin2 {width:110px;position: absolute;top: 502px;left: 52px;z-index: 999;
animation-name:slideIn;
animation-duration:2.0s;
animation-fill-mode:forwards;
}

#main img.main_pin3 {width:110px;position: absolute;top: 545px;left: 138px;z-index: 999;
animation-name:slideIn;
animation-duration:3.0s;
animation-fill-mode:forwards;
}

@keyframes slideIn {
0% {transform: translateY(-30px);opacity: 0;}
100% {transform: translateY(0);}
40%,100% {opacity: 1;}
}

/***************************/

p.midashi {display: inline; font-size: 4vw;line-height: 2em;margin:0 4% 0 0;
padding:.2em .5em;font-weight: 700;background:#000;color:#FFF;letter-spacing: 1px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

p.submidashi {font-size: 5vw;text-align: center;margin: 15% 0 10% 0;
padding-top:10%;
border-top:solid 1px #000;}

p.honbun {font-size: 4vw;line-height: 1.8;margin: 4%;}
p.honbun span {display:block;text-align: center;margin-bottom:6%;font-size:5vw;}
p.honbun span.sub {font-size: 3vw;}

/***************************/

.catchcopy {width: 100%;padding:10% 0;}

/***************************/

.interview {width: 100%;padding:10% 0;}

.interview .taidanlink {width: 100%;text-align: center;} 
.interview .taidanlink a {display: inline-block;margin: 6% auto;
color: #000;border:solid 2px #000;padding: .8em 1em;font-size: 4vw;
font-family: 'Noto Sans JP', sans-serif;}


/***************************/

.itemnavi {width: 100%;padding:10% 0;background: #EFEFEF;}

.itemnavi p {text-align: center;font-size: 4vw;margin: 0 0 4% 0;font-weight: 700;}


.itemnavi ul {width: 100%;margin: 0;padding:0 4%;font-size: 0;text-align: center;}
.itemnavi li {display: inline-block;width: 49%;margin:0 2% 2% 0;text-align: center;}
.itemnavi li:nth-child(2n) {margin:0 0 2% 0;}

.itemnavi li a p {font-size: 3vw;padding:2% 0;}


/***************************/

.detail {width: 100%;padding:0 0 10% 0;}

.detail .from {width: 92%;margin:12% 4% 12% 4%;}

.detail ul.wear {width: 100%;margin:0;padding:0;font-size:0;}
.detail ul.wear li {display:inline-block;width:100%;}
.detail ul.wear li:nth-child(2) {width:80%;margin:5% 10% 2% 10%;}
.detail ul.wear li:nth-child(3) {width:47%;margin:0 1% 0 2%;}
.detail ul.wear li:nth-child(4) {width:47%;margin:0 2% 0 1%;}

.itemgo {width:auto;margin:8% 0;padding:0;}
.itemgo a {display: block;width:60%;margin:0 auto;padding:.8em 1em;text-align: center;
background:#000;color:#FFF;font-family: 'Noto Sans JP', sans-serif;font-size: 4vw;
}

.detail ul.page {width: 100%;margin:10% 0 0 0;padding:4%;font-size: 0;background:#000;position:relative;}
.detail ul.page li {display:inline-block;width:40%;}
.detail ul.page li:nth-child(2) {width: 50%;margin-left:10%;font-size:4vw;color:#FFF;line-height: 1.8em;}
.detail ul.page li:nth-child(3) {position:absolute;width:50%;bottom:10%;right:5%;}
.detail ul.page li:nth-child(3) a {display: block;width:90%;margin:0 auto;padding:.8em 1em;text-align: center;
background:#FFF;color:#000;font-family: 'Noto Sans JP', sans-serif;font-size: 4vw;
}

.detail ul.parts {width: 100%;margin:10% 0 0 0;padding:0;font-size: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.detail ul.parts li {background-color:#333;}
.detail ul.parts li p {font-size:3vw;color:#FFF;font-family: 'Noto Sans JP', sans-serif;}

.detail ul.parts li p.txt1 {font-size:4vw;font-family: 'Roboto', sans-serif;}
.detail ul.parts li p.txt1 span {display:block;font-size:14vw;color:#FFF;margin:-2% 0 0 -2%;font-family: 'Roboto', sans-serif;}
.detail ul.parts li p.txt2 {margin-top:2%;line-height:1.4em;}
.detail ul.parts li p.txt2 span {display:block;font-size: 4vw;color:#FFF;font-family: 'Noto Sans JP', sans-serif;margin-bottom:2%;}


.detail ul.parts .div1 { grid-area: 1 / 1 / 2 / 2; }
.detail ul.parts .div2 { grid-area: 1 / 2 / 2 / 3; padding:4%;}
.detail ul.parts .div3 { grid-area: 2 / 2 / 3 / 3; }
.detail ul.parts .div4 { grid-area: 2 / 1 / 3 / 2; padding:4%;}
.detail ul.parts .div5 { grid-area: 3 / 1 / 4 / 2; }
.detail ul.parts .div6 { grid-area: 3 / 2 / 4 / 3; padding:4%;}
.detail ul.parts .div7 { grid-area: 4 / 2 / 5 / 3; }
.detail ul.parts .div8 { grid-area: 4 / 1 / 5 / 2; padding:4%;}
.detail ul.parts .div9 { grid-area: 5 / 1 / 6 / 2; }
.detail ul.parts .div10 { grid-area: 5 / 2 / 6 / 3; padding:4%;}
.detail ul.parts .div11 { grid-area: 6 / 2 / 7 / 3; }
.detail ul.parts .div12 { grid-area: 6 / 1 / 7 / 2; padding:4%;}


.detail ul.parts2 {width: 100%;margin:10% 0 0 0;padding:0;font-size: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.detail ul.parts2 li {background-color:#333;}
.detail ul.parts2 li p {font-size:3vw;color:#FFF;font-family: 'Noto Sans JP', sans-serif;}

.detail ul.parts2 li p.txt1 {font-size:4vw;font-family: 'Roboto', sans-serif;}
.detail ul.parts2 li p.txt1 span {display:block;font-size:14vw;color:#FFF;margin:-2% 0 0 -2%;font-family: 'Roboto', sans-serif;}
.detail ul.parts2 li p.txt2 {margin-top:2%;line-height:1.4em;}
.detail ul.parts2 li p.txt2 span {display:block;font-size: 4vw;color:#FFF;font-family: 'Noto Sans JP', sans-serif;margin-bottom:2%;}

.detail ul.parts2 .div1 { grid-area: 1 / 1 / 2 / 2; }
.detail ul.parts2 .div2 { grid-area: 1 / 2 / 2 / 3; padding:4%;}
.detail ul.parts2 .div3 { grid-area: 2 / 2 / 3 / 3; }
.detail ul.parts2 .div4 { grid-area: 2 / 1 / 3 / 2; padding:4%;}
.detail ul.parts2 .div5 { grid-area: 3 / 1 / 4 / 2; }
.detail ul.parts2 .div6 { grid-area: 3 / 2 / 4 / 3; padding:4%;}

.detailimg {width: 100%;margin:5% 0 5% 0;padding:0;background: #000;}
.detailimg ul {width: 100%;margin:0;padding:0;font-size: 0;}
.detailimg ul li {display: inline-block;width:100%;margin:0;padding:0;}


/***************************/

footer {font-size: 2vw;text-align: center;color: #FFF; background: #000;padding: .2rem 0;letter-spacing: 1px;}

footer .footlogo {padding:25%;}

/* ページTOPボタン **********************************************/

/*
#page-top {width: 9%;position: fixed;bottom: 4%;right: 2%;box-sizing: border-box; z-index:999999999;}
#page-top a {display: block;background: #000;color: #FFF;width: auto; padding: 15% 0;font-size: 5vw;text-align: center;border-radius: 5px;}
*/

.button-20 {
position: fixed;bottom: 4%;right: 2%; z-index:999999999;
display: flex;justify-content: center;align-items: center;
width: 50px;height: 50px;border: solid 1px #FFF;border-radius: 50%;
background-color: #000;}

.button-20:hover {border: 1px solid #000;background-color: #fff;}
.button-20:hover path {fill: #000;}

/*********************************************************************/
/** for PC layout ***********************************************/
/*********************************************************************/

@media only screen and (min-width: 1000px) {

#main {height: 100vh;
background-image: url("../images/takumi_mainbg_pc.jpg");}

#main .imagebox {width:1200px;height:600px;}

#main img.main_img1 {width: 320px;top: 40px;left: 135px;}
#main img.main_img2 {width:450px;top: 50px;left: 600px;}
#main img.main_img3 {width:280px;top: 310px;left: 150px;}

#main img.main_pin1 {width:200px;top: 335px;left: 525px;}
#main img.main_pin2 {width:200px;top: 310px;left: 590px;}
#main img.main_pin3 {width:200px;top: 385px;left: 735px;}

.headLogo {height:20px;top:15px;right:15px;}

/***************************/

p.midashi {font-size: 24px;line-height: 2em;margin:0 4% 0 0;
padding:.2em .5em;}

p.submidashi {font-size: 36px;margin: 15% 0 10% 0;
padding-top:10%;
border-top:solid 1px #000;}

p.honbun {font-size: 17px;line-height: 2.0;margin:4% 0;text-align: center;}
p.honbun span {font-size:36px;}
p.honbun span.sub {font-size: 24px;}

/***************************/

.catchcopy {width:1000px;margin:0 auto;}

/***************************/

.interview {width:1000px;margin:0 auto;}

.interview img {width:90%;margin:5%;}

.interview .taidanlink {width: 100%;text-align: center;} 
.interview .taidanlink a {font-size: 30px;transition: 0.3s;}
.interview .taidanlink a:hover {color:#FFF;background:#111;}


/***************************/

.itemnavi {width: 100%;}

.itemnavi p {font-size: 46px;}

.itemnavi ul {width: 80%;margin: 0 auto;}
.itemnavi li {width: 32%;margin:0 2% 2% 0;}
.itemnavi li:nth-child(2n) {margin:0 2% 2% 0;}
.itemnavi li:last-child {margin:0 0 2% 0;}

.itemnavi li a p {font-size: 20px;}

/***************************/

.detail {width: 1000px;padding:0 0 10% 0;margin:0 auto;}

.detail .from {width: 80%;margin:12% 10% 12% 10%;}

/*
.detail ul.wear {width: 100%;margin:0 auto;}

.detail ul.wear li:first-child {width:50%;margin:0;}
.detail ul.wear li:nth-child(2) {width:40%;margin:0 5%;}
.detail ul.wear li:nth-child(3) {width:46%;margin:5% 2%;}
.detail ul.wear li:nth-child(4) {width:46%;margin:5% 2%;}
*/

.detail ul.wear {width: 100%;margin:0 auto;}

.detail ul.wear li:first-child {width:80%;margin:0 10% 5% 10%;}
.detail ul.wear li:nth-child(2) {width:30%;margin:0 10% 0 0;}
.detail ul.wear li:nth-child(3) {width:25%;margin:0 10% 0 0;}
.detail ul.wear li:nth-child(4) {width:25%;margin:0;}


.detail ul.page li:nth-child(2) {font-size:28px;}
.detail ul.page li:nth-child(3) a {font-size: 24px;transition: 0.3s;}
.detail ul.page li:nth-child(3) a:hover {background:#666;color:#FFF;}

/***************************/

.detail ul.parts .div2 {padding:6%;}
.detail ul.parts .div4 {padding:6%;}
.detail ul.parts .div6 {padding:6%;}
.detail ul.parts .div8 {padding:6%;}
.detail ul.parts .div10 {padding:6%;}
.detail ul.parts .div12 {padding:6%;}

.detail ul.parts li p {font-size:20px;}

.detail ul.parts li p.txt1 {font-size:42px;}
.detail ul.parts li p.txt1 span {font-size:160px;margin:-3% 0 0 -2%;}
.detail ul.parts li p.txt2 {margin-top:0;line-height:1.4em;}
.detail ul.parts li p.txt2 span {font-size: 28px;}

.detail ul.parts2 .div2 {padding:6%;}
.detail ul.parts2 .div4 {padding:6%;}
.detail ul.parts2 .div6 {padding:6%;}

.detail ul.parts2 li p {font-size:20px;}

.detail ul.parts2 li p.txt1 {font-size:42px;}
.detail ul.parts2 li p.txt1 span {font-size:160px;margin:-3% 0 0 -2%;}
.detail ul.parts2 li p.txt2 {margin-top:0;line-height:1.4em;}
.detail ul.parts2 li p.txt2 span {font-size: 28px;}


.detailimg {width: 100%;margin:0 0 5% 0;padding:2% 0;}
.detailimg ul {width: 750px;margin:0 auto;padding:0;}
.detailimg ul li {width:100%;margin:0;padding:0;}


/***************************/

footer {font-size: 12px;}

footer .footlogo {padding:10% 40%;}


/* ページTOPボタン **********************************************/
/*
#page-top {width: 60px;}
#page-top a {width: auto; padding: 15% 0;font-size: 36px;}
*/
}/* media query */