@charset "UTF-8";
@import url("https://use.typekit.net/olm6vix.css");
@import url("https://use.typekit.net/xpl3tzg.css");

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; color: #333; text-decoration: none; } a:hover{text-decoration: none;} ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
img{width: 100%; height: auto; vertical-align: bottom;}

html, body {
	width: 100%;
	height: auto;
	color: #333;
	font-family:  YakuHanJP,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴシック','Hiragino Sans','ＭＳ ゴシック',sans-serif;
}
html {
	color: #333;
	background-color: #f1f1ed;
	font-size: 62.5%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.pc{display: block;} .sp{display: none;}
.illustSp{display: none;}
.font1{font-family: dnp-shuei-mincho-pr6n,sans-serif; font-weight: 400; font-style: normal;}

.textArea .illust2{width: 60px; margin: 5.5rem auto 10rem;}

/*content*/
#container{overflow: hidden;}

#mainVisual{position: relative;}
#mainVisual .main{opacity:0; animation: fadeIn 3.0s ease 0.2s forwards;}
#mainVisual .tit{opacity: 0; position: absolute; width: 74.4vw; bottom: 0.25vw; left: 5.5vw; animation: fadeIn2 1.2s ease 1.0s forwards;}

#mainVisual .main picture {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    display: block;
}
#mainVisual .main picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

@keyframes fadeIn2 {
	0% {
	  opacity: 0;
	  transform: translate(0, 20px);
	}
	100% {
	  opacity: 1;
	  transform: translate(0, 0);
	}
 }
 @keyframes fadeIn {
	0% {
	  opacity: 0;
	  filter: blur(10px);
	}
	100% {
	  opacity: 1;
	  filter: blur(0);
	}
 }

#interview{position: relative; padding-top: 11.0rem; }

.illustSp,.posAb{display: none;}

.flowerWrap{z-index: 10; width: 100%; position:absolute; left: 0; top: 0;}
.flowerWrap2{top: 2470px; }
.flowerWrap3{top: 4940px; }
.flowerWrap4{top: 7330px;} 
.flowerWrap5{top: 9780px;}
.flowerWrap p,.flowerWrap div{position: absolute;}

.interviewIn{width:600px; margin: 0 auto;}

.titBox{padding-bottom: 4.4rem; margin-bottom: 4.4rem; border-bottom: 1px solid #aeaea9; opacity: 0; animation: fadeIn2 1.2s ease 1.6s forwards;}
.titBox p{line-height: 1;}
.titBox p:first-child{font-size: 1.1rem; color: #636357; margin-bottom: 2.5rem;}
.titBox p:last-child{font-size: 1.7rem;}
.titBox h2{font-size: 2.8rem; line-height: 1.42; margin-bottom: 1.8rem;}

.textArea{padding-bottom: 9.0rem; border-bottom: 1px solid #aeaea9; position: relative;}
.textArea.notbd{border-bottom: none;}

.textArea .box{position: relative;}
.textArea .intro{font-size: 1.2rem; line-height: 1.8; color: #68685b; background-color: #e7e7e1; padding: 2.6rem 3.0rem; margin-bottom: 5.6rem;}
.textArea p{font-size: 1.4rem; line-height: 2.14; margin-bottom: 2.8rem; text-align: justify;}
.textArea p:last-child{margin-bottom: 0;}
.textArea p a{ text-decoration: underline;}
.textArea p a:hover{ text-decoration: none;}
.textArea p.txtCol{color:#64644d; font-style: italic; }
.textArea .highlight{color: #595933; margin-top: 9.0rem; letter-spacing: 0.34em;}
.textArea .highlight p{margin-bottom: 0.5rem; text-align: center;}
.textArea .highlight p span{padding: 4px;}

.textArea .highlight2{color: #595933; margin: 5.0rem 0 4.0rem; letter-spacing: 0.34em;}
.textArea .highlight2 p{margin-bottom: 0.5rem; font-size:1.7rem; }
.textArea .highlight2 p span{padding: 4px; background-color: white;}

.textArea .h4Wrap{position: relative; height: 54px; padding-left: 2.0rem; margin:10.8rem 0 3.3rem; display: flex; align-items: center;}
.textArea .h4Wrap::before{content: ""; width: 7px; height: 56px; background: url( "https://baycrews.jp/src/feature/beauty/assets/img/monthly/titLine.png" ) 0 0 / 7px 56px no-repeat; position: absolute; top: 0; left: 0;}
.textArea .h4Wrap h4{font-size: 2.0rem; line-height: 30px;}

.textArea .illust1{width: 100%; margin: 5.5rem 0;}

.outro{font-size: 1.4rem; line-height: 2.14; margin: 5.2rem 0 11.0rem;}

.profile{width: 100%; background-color: #e7e7e2; padding: 7.0rem 0;}
.profileIn{width: 600px; margin: 0 auto; display: flex; align-items: center;}
.profileIn .img{width: 270px; margin-right: 6.0rem;}
.profileIn .txt{width: 300px;}
.profileIn .txt .name{font-size: 1.8rem; margin-bottom: 1.6rem}
.profileIn .txt .name span{display: block; font-size: 1.2rem; line-height: 1.5; margin-bottom: 0.2rem;}
.profileIn .txt .prof{font-size: 1.3rem; line-height: 1.84;}
.profileIn .txt .prof a{text-decoration: underline;}
.profileIn .txt .prof a:hover{text-decoration: none;}

.info{text-align: center; padding: 11.4rem 0 4.5rem;}
.info p span{font-size: 1.0rem;}
.info p:first-child{font-size: 1.4rem; line-height: 2.0; margin-bottom: 5.7rem;}
.info p:last-child{color: #64644d; font-size: 1.1rem; line-height: 1.81;}

.sns{width: 172px; margin: 0 auto 12.0rem;}
.sns p{text-align: center; font-size: 1.2rem; margin-bottom:1.5rem;}
.sns ul{display: flex; justify-content: space-between; align-items: center;}
.sns li:first-child{width: 37px;}
.sns li:nth-child(2){width: 37px;}
.sns li:last-child{width: 35px;}

/* btn */
.btnWrap{width: 100%; display: flex;  margin-bottom: 0rem; background-color: #f7f7f3;}
.btnWrap li{width: 50%; position: relative;}
.btnWrap li a{transition: .3s; display: block; padding: 40px 0; background-color: #f7f7f3;}
.btnWrap li a:hover{ background-color: #333;}
.btnWrap li a:hover .tit{color: #FFF;}
.btnWrap li.back{width: calc(50% - 1px); margin-right: 1px;}
.btnWrap li.back::before{ content:""; width: 1px; height: 80px; position:absolute; top: 40px; right: -1px; background-color: #CCC; }
.btnWrap li.back .btn{margin-left: auto;}
.btnWrap li.next .btn{padding-right: auto;}
.btnWrap li .btn{width: 384px; display: flex; justify-content: space-between; align-items: center; }
.btnWrap li .btn .img{width: 80px;}
.btnWrap li .btn .img img{width: 80px; height: 80px; object-fit: cover;}
.btnWrap li .btn .tit{width: 240px; font-size: 12px;}
.btnWrap li.back .btn .tit{margin-right: 40px;}
.btnWrap li.next .btn .tit{padding-left: 40px;}

/* sideNavi */
.sideNavi{display: block; position: fixed; right: 18px; top: 245px; padding:12px 0 12px 22px; border-left: 1px solid #b4adb6; opacity: 0; animation: fadeIn2 1.2s ease 2.0s forwards; z-index: 90;}
.sideNavi ul li{cursor: pointer; font-size: 11px; line-height: 1; writing-mode: vertical-rl; font-size: 13px; font-family: ltc-caslon-pro,serif; font-weight: 400; font-style: normal;}
.sideNavi ul li.none{opacity:0.5;}
.sideNavi ul li:first-child{margin-bottom: 24px;}
.slide-line{
    position: absolute;
    left: 0;
    width: 3px;
    background-color:#000;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.main_menu-trigger,.naviBox{display: none;}

.pageTop{width: 8px; margin: -30px 30px 30px auto; position: relative; z-index: 10;}

footer{border-top: 1px solid #000; margin-bottom: 60px; position: relative;}
.ftIllust{position: absolute; left: 0; top: -62px; width: 145px;}

.footerIn{width: calc(100% - 200px); margin: 60px auto 0; display: flex; justify-content: space-between;}
.footerIn .left{text-align: left; font-family: ltc-caslon-pro,serif; font-weight: 400; font-style: normal;}
.footerIn .left .ftTit{font-size:2.0rem; margin-bottom: 3.8rem;}
.footerIn .left ul li{font-size:1.3rem; position: relative; padding-left:20px; line-height: 1;}
.footerIn .left ul li::before{content: ""; width: 12px; height: 1px; background-color: #000; position: absolute; left: 0; top: 8px;}
.footerIn .left ul li:first-child{margin-bottom: 1.6rem;}
.footerIn .left ul li a:hover{opacity: 0.5;}

.footerIn .right{ text-align: right; margin-top: 8.0rem;}
.footerIn .storeLink{ margin-bottom: 2.8rem;}
.footerIn .storeLink a{text-decoration: underline;}
.footerIn .storeLink a:hover{text-decoration: none;}

/* fadein */
.fadein {opacity:0; transition : all 1.5s ease;}
.fadein.scrollin{ opacity:1; }

@media(min-width:769px){
	.flower1{width: 101px; top: -50px; left: 0; opacity: 0; animation: fadeIn2 1.2s ease 1.4s forwards;}
	.flower2{width: 136px; top: 0; right: 0; opacity: 0; animation: fadeIn2 1.2s ease 1.4s forwards;}

	.flower3{width: 147px; left: 0; top: 360px;}
	.flower3a{width: 147px;}
	.flower3b{width: 140px; top: 190px;}

	.flower4{width: 150px; right: 0; top: 700px;}
	.flower4a{width: 150px; right: 0;}
	.flower4b{width: 140px; top: 51px; right: 0;}

	.flower5{width: 125px; left: 0; top: 1270px;}
	.flower5a{width: 122px;}
	.flower5b{width: 58px; top: 164px; left: 70px;}
	.flower6{width: 120px; right: 0; top: 1750px;}
	.flower7{width: 181px; left: 0; top: 2020px;}
}

@media(max-width:768px){

	.pc{display: none;} .sp{display: block;}
	.z10{z-index: 10; position: relative;}

	#mainVisual .tit{position: absolute; width: 74.4vw; bottom: 2.0vw; left: 5.5vw;}
	#mainVisual .main picture { height: initial;}

	.interviewIn{width:calc(100% - 40px); margin: 0 auto;}
	.flowerWrap{z-index: 10; width: 100%; position:absolute; left: 0; top: 0;}
	
	.spBox{position: relative;}
	.illustSp{display: block; position: relative;}
	.posAb{position: absolute; z-index: -1; display: block;}
	.flower1{width: 14.9%; }
	.flower2{width: 24.2%; }

	.flower3a{width: 27.4%; }
	.flower3b{width: 27%; }
	
	.flower4a{width: 34.4%; }
	.flower4b{width: 29.4%; }
	
	.flower5{width: 125px;}
	.flower5a{width: 18%;}
	.flower5b{width: 8%; }
	.flower6{width: 16%; }

	.pos1{top: -30px; left: -4px; z-index: 1; opacity: 0; animation: fadeIn2 1.2s ease 1.4s forwards;}
	.pos2{top: 110px; right: -4%; opacity: 0; animation: fadeIn2 1.2s ease 1.4s forwards;}
	.pos3{bottom: -58px; left: -40px;}
	.pos4{top: -30px; right: -64px;}
	.pos5{top: -70px; right: -30px;}
	.pos6{bottom: -40px; left: -28px; z-index: -1;}
	.pos7{margin: 0 0 0 -20px;}
	.pos8{top: -18px; left: 18%;}
	.pos9{right: -20px; top: 70px;}
	.pos10{top: -10px; left: -24px; z-index: -1;}
	.pos11{bottom: -120px; right: -33px; z-index: -1;}
	.pos12{margin:0 0 0 -40px;}
	.pos13{right: -64px; top: 55px;}
	.pos14{margin: 0 0 0 -32px; position: relative; z-index: -1;}
	.pos15{right: -20px; top: -20px;}
	.pos16{left:0; top: -38px; z-index: 10;}
	.pos17{left: 21%; top: -4px;}	
	.pos18{right:0; bottom: -38px; z-index: 10;}

	.titBox{padding-bottom: 3.9rem; margin-bottom: 3.9rem; border-bottom: 1px solid #aeaea9;}
	.titBox p{line-height: 1;}
	.titBox p:first-child{font-size: 1.1rem; margin-bottom: 1.9rem;}
	.titBox p:last-child{font-size: 1.7rem;}
	.titBox h2{font-size: 2.2rem; line-height: 1.54; margin-bottom: 1.8rem; width: 72vw;}

	.textArea{padding-bottom: 5.0rem;}
	.textArea .intro{font-size: 1.2rem; line-height: 1.8; padding: 1.6rem 2.2rem; margin-bottom: 5.6rem;}
	.textArea p{margin-bottom: 2.8rem;}

	.textArea .highlight2{margin: 4.0rem 0 3.2rem; z-index: 20; position: relative;}
	.textArea .highlight2 p{margin-bottom: 0.3rem; font-size:1.6rem; }
	.textArea .highlight2 p span{ padding: 4px;}

	.textArea .h4Wrap{position: relative; height: 86px; padding-left: 2.0rem; margin:5.8rem 0 3.8rem; z-index: 20;}
	.textArea .h4Wrap::before{content: ""; width: 7px; height: 86px; background: url( "https://baycrews.jp/src/feature/beauty/assets/img/monthly/titLine_sp.png" ) 0 0 / 7px 86px no-repeat; position: absolute; top: 0; left: 0;}
	.textArea .h4Wrap h4{line-height: 1.5;}

	.textArea .illust1{width: 100vw; margin: 10.5rem 0 10.5rem -20px;}
	.textArea .illust2{width: 16vw; margin: 6.5rem auto 12.0rem;}

	.outro{font-size: 1.4rem; line-height: 2.14; margin: 5.2rem 0 7.5rem;}

	.profile{ padding: 7.0rem 0; position: relative;}
	.profileIn{width: 72%; margin: 0 auto; display: block;}
	.profileIn .img{width: 100%; margin: 0 0 2.8rem 0;}
	.profileIn .txt .name{font-size: 1.8rem; margin-bottom: 1.6rem}
	.profileIn .txt .name span{display: block; font-size: 1.2rem; line-height: 1.5; margin-bottom: 0.7rem;}
	.profileIn .txt .prof{font-size: 1.3rem; line-height: 1.84;}

	.info{text-align: center; padding: 6.4rem 0 6.0rem;}
	.info p:first-child{font-size: 1.4rem; line-height: 2.0; margin-bottom: 2.7rem;}
	.info p:last-child{font-size: 1.1rem; line-height: 1.81;}

	/* btn */
	.btnWrap{width: 100%; display: block; padding: 16px 0; margin-bottom: 8.0rem;}
	.btnWrap li{width: 83%; margin: 0 auto;}
	.btnWrap li a{ padding: 24px 0; background-color: #f7f7f3;}
	.btnWrap li a:hover{ background-color: #f7f7f3;}
	.btnWrap li a:hover .tit{color: #000;}
	.btnWrap li.back{width: 83%; margin-right: auto; border-right: none; border-bottom: 1px solid #CCC; padding-bottom: 0;}
	.btnWrap li.back::before{ content:none; }
	.btnWrap li.back .btn{margin-left: auto;}	
	.btnWrap li.next{padding-top: 0;}
	.btnWrap li.next .btn{padding-right: auto;}
	.btnWrap li .btn{width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
	.btnWrap li .btn .tit{width: 66.5%;}
	.btnWrap li.back .btn .tit{margin:0 0 0 40px;}
	.btnWrap li.next .btn .tit{padding-left: 0;}
	
	.sns{width: 172px; margin: 0 auto 6.5rem;}
	.sns p{text-align: center; font-size: 1.2rem; margin-bottom:1.5rem;}
	.sns ul{display: flex; justify-content: space-between; align-items: center;}
	.sns li:first-child{width: 37px;}
	.sns li:nth-child(2){width: 37px;}
	.sns li:last-child{width: 35px;}	

	.main_menu-trigger,.main_menu-trigger span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
		z-index: 200; }
	  
		.main_menu-trigger {
			position: fixed;
			top: 20px;
			right: 20px;
			width: 32px;
			height: 22px;
			z-index: 200; 
		}
	  .main_menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #000;
		border-radius: 4px; }
	  .main_menu-trigger.active span {background-color: #000;}
		
	  .main_menu-trigger span:nth-of-type(1) {
		top: 0;
		-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
	  .main_menu-trigger span:nth-of-type(2) {
		top: 10px;
		-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
		transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); }

		.main_menu-trigger span:nth-of-type(3) {
			top: 20px;
			-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
			transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
		
	  .main_menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(12px) rotate(-30deg);
		transform: translateY(12px) rotate(-30deg); }
	  .main_menu-trigger.active span:nth-of-type(2) {
		opacity: 0; }
		.main_menu-trigger.active span:nth-of-type(3) {
			-webkit-transform: translateY(-8px) rotate(30deg);
			transform: translateY(-8px) rotate(30deg); }		

	.naviBox{ display: block; width:100%; height: 100vh; height: 100dvh; position: fixed; top: 0; left: 0;
		background-color:rgba(0,0,0,0.3); z-index: 99; display: none;
	}
	.naviBox .naviIn{width: 80%; height: 100%; display: block; margin-left: auto; background-color: #FFF; padding:120px 40px; box-sizing: border-box;}	
	.naviBox .naviIn ul{margin-bottom: 6.0rem;}
	.naviBox .naviIn ul li{font-size:1.6rem; position: relative; padding-left:25px; line-height: 1; font-family: ltc-caslon-pro,serif; font-weight: 400; font-style: normal;}
	.naviBox .naviIn ul li:before{content: ""; width: 17px; height: 1px; background-color: #000; position: absolute; left: 0; top: 8px;}
	.naviBox .naviIn ul li:first-child{margin-bottom: 1.9rem;}
	.storeLink a{text-decoration: underline;}

	footer{margin-bottom: 60px; position: relative;}
	footer .pageTop{position: absolute; right:2.0rem; bottom:0; margin:0;} 
	.ftIllust{position: absolute; left: 0; top: -62px; width: 20.8%;}
	
	.footerIn{width: 81.8%; margin: 60px auto 0; display: block;}
	.footerIn .left .ftTit{font-size:1.6rem; margin-bottom: 3.8rem;}
	.footerIn .left ul li{font-size:1.3rem; position: relative; padding-left:20px; line-height: 1;}
	.footerIn .left ul li::before{content: ""; width: 12px; height: 1px; background-color: #000; position: absolute; left: 0; top: 8px;}
	.footerIn .left ul li:first-child{margin-bottom: 1.6rem;}
	.footerIn .left ul li a:hover{opacity: 0.5;}
	
	.footerIn .right{ text-align: left; margin-top: 8.0rem;}
	.footerIn .storeLink{ margin-bottom: 2.8rem;}
	.footerIn .storeLink a{text-decoration: underline;}
	.footerIn .storeLink a:hover{text-decoration: none;}

}