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

/* base
-----------------------------------------------*/
/* ========== universal reset ========== */
/* ========== base style ========== */

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* ========== border ========== */
/* ========== float ========== */
/* ========== display ========== */
/* ========== position ========== */
/* ========== overflow ========== */
/* ========== width ========== */
/* ========== margin ========== */
/* ========== device displaying ========== */
/* ========== animation for ScrollTrigger.min.js  ========== */

/* other style
-----------------------------------------------*/



/* base
-----------------------------------------------*/
/* ========== universal reset ========== */
/**
* html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
* Richard Clark (http://richclarkdesign.com)
* http://cssreset.com
*/
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,
button, input, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body { line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul { list-style:none; }
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}


/* ========== base style ========== */
* { box-sizing: border-box; }

html { height: 100%; }

body {
height: 100%;
min-height: 100%;
background: #fafaf7;
color: #000;
font-size: 3.2vw;
font-family: classico-urw, sans-serif;
font-style: normal;
font-weight: 400;
letter-spacing: 0.04em;
}
@media (min-width:768px){
	body {
	font-size: 14px;
	}
}

a:link,
a:visited {
color: #000;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}

a:hover {
opacity: 0.80;
filter: alpha(opacity=80);
}

div,p,h1,h2,h3,h4,h5,h6,li,dt,dd,th,td,button {
line-height: 100%;
font-family: classico-urw, sans-serif;
font-style: normal;
font-weight: 400;
letter-spacing: 0.04em;
}

div, article { box-sizing: border-box; }

ol, ul { list-style:none; }

img, picture, video {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}



/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* align */
.al_left { text-align: left; }
.al_center { text-align: center; }
.al_right { text-align: right; }

/* size */
.fs8 { font-size: 2.133333vw; }
.fs9 { font-size: 2.4vw; }
.fs10 { font-size: 2.66666666vw; }
.fs11 { font-size: 2.93333333vw; }
.fs12 { font-size: 3.2vw; }
.fs13 { font-size: 3.46666666vw; }
.fs14 { font-size: 3.73333333vw; }
.fs15 { font-size: 4vw; }
.fs16 { font-size: 4.26666666vw; }
.fs17 { font-size: 4.53333333vw; }
.fs18 { font-size: 4.8vw; }
.fs20 { font-size: 5.33333333vw; }
@media (min-width:375px){
	.fs8 { font-size: 8px; }
	.fs9 { font-size: 9px; }
	.fs10 { font-size: 10px; }
	.fs11 { font-size: 11px; }
	.fs12 { font-size: 12px; }
	.fs13 { font-size: 13px; }
	.fs14 { font-size: 14px; }
	.fs15 { font-size: 15px; }
	.fs16 { font-size: 16px; }
	.fs17 { font-size: 17px; }
	.fs18 { font-size: 18px; }
	.fs20 { font-size: 20px; }
}

/* weight */
.fw200 { font-weight: 200 !important; }
.fw300 { font-weight: 300 !important; }
.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500 !important; }
.fw600 { font-weight: 600 !important; }
.fw700 { font-weight: 700 !important; }
.fw800 { font-weight: 800 !important; }
.fw900 { font-weight: 900 !important; }

/* line height */
.lh100 { line-height: 100%; }
.lh120 { line-height: 120%; }
.lh130 { line-height: 130%; }
.lh140 { line-height: 140%; }
.lh150 { line-height: 150%; }
.lh160 { line-height: 160%; }
.lh170 { line-height: 170%; }
.lh180 { line-height: 180%; }
.lh190 { line-height: 190%; }
.lh200 { line-height: 200%; }
.lh210 { line-height: 210%; }
.lh225 { line-height: 225%; }

/* letter space */
.ltrspace0 { letter-spacing: 0; }
.ltrspace0025 { letter-spacing: 0.025em; }
.ltrspace005 { letter-spacing: 0.05em; }
.ltrspace0075 { letter-spacing: 0.075em; }
.ltrspace01 { letter-spacing: 0.1em; }
.ltrspace0125 { letter-spacing: 0.125em; }
.ltrspace015 { letter-spacing: 0.15em; }

.deco_line { text-decoration: underline !important; }


/* ========== float ========== */
/* clearfix */
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after { clear: both; }

/* float */
.float_left { float: left; }
.float_right { float: right; }


/* ========== display ========== */
.disp_block { display: block !important;}
.disp_iblock { display: inline-block !important;}
.disp_inline { display: inline !important;}
.disp_none { display: none;}
.disp_flex { display: flex; flex-wrap: wrap; justify-content: space-between; }


/* ========== position ========== */
.posi_relative { position: relative !important; }
.posi_absolute { position: absolute !important; }
.posi_fixed { position: fixed !important; }


/* ========== overflow ========== */
.overflow_hidden { overflow: hidden !important; }


/* ========== margin ========== */
/* margin-auto */
.mx_auto { margin-left: auto; margin-right: auto; }


/* ========== device displaying ========== */
.sp_none{ display: none; }
@media (min-width:768px){.sp_none{display: block;} .tab_none { display: none; }}
.sp_only{ display: block; }
@media (min-width:768px){.sp_only{display: none;}}
.spc_none{ display: block; }
@media (min-width:1199px){.pc_none{display: block;}}
.pc_only{ display: none; }
@media (min-width:1200px){.pc_none{display: none;}
.pc_only{display: block;}
.tab_none{ display: block; }
}


/* ========== animation for ScrollTrigger.min.js  ========== */
.invisible {
transition: opacity 1s ease;
opacity: 0.0;
}
.visible {
transition: opacity 1s ease;
opacity: 1.0;
}



/* other style
-----------------------------------------------*/
.allwrapper { /* Xscroll bar hidden */
position: relative;
width: 100%;
background: #fafaf7;
animation-delay: 0.75s;
overflow: hidden;
transition: background-color 0.8s ease;
}
.ff_mincho {
font-family: zen-old-mincho, sans-serif;
}

.pcleft, .pcright {
display: none;
}
@media (min-width:1200px){
	.pcleft, .pcright {
	position: fixed;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(( 100% - 100vh / 900 * 512 ) / 2 );
	height: 100vh;
	}
	.pcleft {
	left: 0;
	animation-delay: 1.25s;
	}
	.pcright {
	right: 0;
	animation-delay: 1.5s;
	}
	.pcleft_logo {
	left: calc(50% - 75px);
	top: calc(50% - 75px);
	width: 151px;
	fill: #000;
	}
	.pcleft_logo.white {
	fill: #fff;
	}
	.pcright svg {
	fill: #000;
	}
	.pcright svg.white {
	fill: #fff;
	}
	.pcright_title {
	left: 15%;
	top: calc(50% - 92px);
	width: 70%;
	}
	.pcright_sns {
	width: 48%;
	left: 15%;
	top: calc(50% + 2.3vw);
	}
	.pcright_sns li:first-child {
	width: 39.1%;
	}
	.pcright_sns li:nth-child(2) {
	width: 4.32692%;
	}
	.pcright_sns li:nth-child(3) {
	width: 13.78%;
	}
	.pcright_nav {
	bottom: 30px;
	left: 30px;
	}
	.pcright_nav li + li {
	margin-top: 15px;
	}
	.pcright_nav li svg {
	width: auto;
	height: 20px;
	margin: 0;
	}
	.pcright_nav li:first-child img,
	.pcright_nav li:nth-child(2) img {
	width: 45px;
	height: auto;
	margin: 0;
	}
}

.logo_pagetop {
top: 6.13vw;
left: calc(50% - 42.13333333333%);
width: 26.6666666666%;
z-index: 10;
fill: #fff;
transition: fill 0.3s ease;
}
.logo_pagetop.is-black {
fill: #000;
}
@media (min-width:768px){
	.main {
	width: calc( 100vh / 900 * 512 );
	}
	.logo_pagetop {
	top: 3.5%;
	left: calc(50% - (50vh - 75px) / 900 * 512);
	width: 150px;
	}
}

.mv {
width: 100%;
}
.mv_title {
top: 0;
right: 0;
width: 17.6%;
height: 100%;
background: #b3631b;
}
.intro {
padding: 26.6% 8% 14%;
}
.intro_title {
width: 72.2666666666%;
}
.intro p {
margin-top: 2.5em;
line-height: 2.5;
}

.index {
padding: 14% 0 12%;
}
.index_title {
width: 12%;
}
.index_list {
justify-content: flex-start;
gap: 2em 7.93650793650794%;
width: 84%;
margin-top: 8%;
}
.index_list li {
width: 46.03174603174603%;
}
.index_list li p {
margin-top: 0.45em;
font-size: 2.6666666666vw;
}
@media (min-width:768px){
	.index_list li p {
	font-size: 12px;
	}
}

.main {
background: #fafaf7;
}
@media (min-width: 768px) {
	body.bg-chapter01,
	body.bg-chapter01 .allwrapper {
	background-color: #7e6e82;
	}
	body.bg-chapter02,
	body.bg-chapter02 .allwrapper {
	background-color: #89355c;
	}
	body.bg-outro,
	body.bg-outro .allwrapper {
	background-color: #fafaf7;
	}
}
.chapbox {
position: relative;
width: 100%;
padding: 14.13% 0 12%;
}
.chapbox::before {
content: "";
position: absolute;
top: 0;
width: 2.1333333333%;
height: 100%;
z-index: 2;
}
.chapter_text {
width: 84%;
margin-top: 6.4%;
}
.price {
width: 53.3333333333%;
margin-top: 6.66%;
}
.price li + li {
margin-top: 7%;
}
.price_itemname {
width: 35%;
}
.price_price {
width: 50%;
}
.price_buy {
width: 15%;
text-decoration: underline;
}
.chap01::before {
left: 0;
background: #7e6e82;
}
.chap01_title {
width: 54.6666666666%;
margin-left: 6.1333333333%;
}
.chap01 .price {
margin-left: 7.2%;
}
img.chap01_item01_img01 {
width: 77.8666666666%;
margin: 9.0666666666% auto 0 0;
}
img.chap01_item01_img02 {
width: 40%;
margin: -20.8% auto 0 49.8666666666%;
}
img.chap01_item01_img03 {
width: 46.4%;
margin: 11.7333333333% auto 0 0;
}
img.chap01_item01_img04 {
width: 48.5333333333%;
margin: -64.8% 0 0 auto;
}
img.chap01_item02_img01 {
width: 84%;
margin: 20% auto 0;
}
img.chap01_item02_img02 {
width: 70.1333333333%;
margin: 11.2% auto 0 0;
}
img.chap01_item02_img03 {
width: 39.4666666666%;
margin: -23.4666666666% auto 0 50.4%;
}
img.chap01_item03_img01 {
width: 100%;
margin: 20% auto 0;
}
img.chap01_item03_img02 {
width: 40.8%;
margin: 9.3333333333% auto 0 5.8666666666%;
}
img.chap01_item03_img03 {
width: 40.5333333333%;
margin: -64.5333333333% auto 0 49.3333333333%;
}
img.chap01_item04_img01 {
width: 84.8%;
margin: 20% 0 0 auto;
}
img.chap01_item04_img02 {
width: 63.4666666666%;
margin: 10.6666666666% auto 0 0;
}
.chap02::before {
right: 0;
background: #89355c;
}
.chap02_title {
width: 45.6%;
margin-left: 8%;
}
.chap02 .price {
margin-left: 7.2%;
}
img.chap02_item01_img01 {
width: 81.0666666666%;
margin: 8.8% 2.1333333333% 0 auto;
}
img.chap02_item01_img02 {
width: 48.5333333333%;
margin: 12% auto 0 0;
}
img.chap02_item01_img03 {
width: 46.4%;
margin: -66.6666666666% 2.1333333333% 0 auto;
}
img.chap02_item02_img01 {
width: 84%;
margin: 18.66% auto 0 8%;
}
img.chap02_item02_img02 {
width: 69.8666666666%;
margin: 10.13% 2.1333333333% 0 auto;
}
img.chap02_item02_img03 {
width: 45.3333333333%;
margin: -32.8% auto 0 0;
}
.outro {
padding-top: 40%;
}
.profile {
margin: 0 0 24.8%;
padding: 0 8%;
}
.profile_title {
width: 10.1333333333%;
margin: 8.53% 0 4%;
}
.profile p {
margin-top: 2.13%;
}


/*フッター
----------------------------------------------------------------------*/
.footer_area{
width: 100%;
margin: 0;
background: #fff;
}
.footer_area_layout{
width: 90%;
margin: 0 auto;
}
.logo_footer{
width: 100%;
text-align: center;
margin: 0 0 0 0;
padding: 110px 0 60px 0;
}
.logo_footer img{
width: 120px;
display: inline-block;
}
.footer_area .sns_area {
padding-bottom: 50px;
}
.footer_area .sns_area h2{
width: 70px;
margin: 0 auto 25px auto;
padding: 0;
text-align: center;
}
.footer_area .sns_area h2 img{
margin: 0 auto;
}
.footer_area .sns_area ul.sns{
display: flex;
width: 234px;
max-width: 80%;
margin: 0 auto;
padding: 0;
}
.footer_area .sns_area ul.sns li{
position: relative;
flex: 1 1;
width: 48px;
height: 48px;
margin: 0 15px 0 15px;
padding: 0;
text-align: center;
}
.footer_area .sns_area ul.sns li .gazou{
width: 48px;
height: 48px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #90a5ad;
border-radius: 50%;
}
.footer_area .sns_area ul.sns li a{
position: absolute;
z-index: 2;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.footer_area .sns_area ul.sns li .for_hover{
transition:opacity 0.5s ease;
}
.footer_area .sns_area ul.sns li img{
width: 20px;
vertical-align:middle;
}
.footer_area .sns_area ul.sns li .for_hover:hover{
opacity:0.7;
transition:opacity 0.5s ease;
}
.footer_area h2{
margin: 0 0 14px 0;
}
.follow_us{
margin: 0 0 50px 0;
font-size: 10px;
font-size: 2.6666666vw;
font-size:clamp(9px, 2.6666666vw, 11.0px);
/*IvyMode*/
font-family: ivymode, sans-serif;
font-weight: 400;
font-style: normal;
/*フォント約物すべて、詰める*/
-moz-font-feature-settings: "palt" 1;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
letter-spacing: 0.099em;
}
.follow_us li {
line-height: 2.2;
}
.follow_us .tyotai{
position: relative;
display: inline-block;
transform: scale(1, 1.052);
-webkit-transform: scale(1, 1.052);
transform-origin: left bottom;
-webkit-transform-origin: left bottom;
}
.follow_us ul{
width: 260px;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.follow_us ul li{
position: relative;
width: 130px;
margin: 0;
padding: 0;
display: inline-block;
}
.follow_us ul li::before{
position: relative;
content: '・';
padding: 0 4px 0 0;
}
.follow_us ul li a{
margin: 0 0 0 0;
color: #000;
text-decoration: none;
transition:opacity 0.3s ease;
}
.follow_us ul li a:hover{
opacity:0.5;
}
/*スタッフリスト*/
.staff_list{
margin: 0 0 50px 0;
}
.staff_list,
.staff_list * {
font-size: 10px;
font-size: 2.6666666vw;
font-size:clamp(9px, 2.6666666vw, 11.0px);
/*IvyMode*/
font-family: classico-urw, sans-serif;
font-weight: 400;
font-style: normal;
/*フォント約物すべて、詰める*/
-moz-font-feature-settings: "palt" 1;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
letter-spacing: 0.099em;
line-height: 2.2;
}
.staff_list .tyotai{
position: relative;
display: inline-block;
font-family: classico-urw, sans-serif;
font-weight: 400;
font-style: normal;
/*フォント約物すべて、詰める*/
-moz-font-feature-settings: "palt" 1;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
letter-spacing: 0.099em;
transform: scale(1, 1.052);
-webkit-transform: scale(1, 1.052);
transform-origin: left bottom;
-webkit-transform-origin: left bottom;
}
.staff_midashi{
/*IvyMode Italic*/
font-family: classico-urw, sans-serif;
font-weight: 400;
font-style: italic;
}

/*リンクリスト*/
.link_list{
margin: 0 0 50px 0;
font-size: 10px;
font-size: 2.6666666vw;
font-size:clamp(9px, 2.6666666vw, 11.0px);
/*IvyMode*/
font-family: ivymode, sans-serif;
font-weight: 400;
font-style: normal;
/*フォント約物すべて、詰める*/
-moz-font-feature-settings: "palt" 1;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
letter-spacing: 0.099em;
}
.link_list ul li{
position: relative;
line-height: 2.2;
}
.link_list ul li::before{
position: relative;
content: '・';
padding: 0 4px 0 0;
}
.link_list ul li a{
margin: 0 0 0 0;
color: #000;
text-decoration: none;
transition:opacity 0.3s ease;
}
.link_list ul li a:hover{
opacity:0.5;
}
.link_list_jp{
margin: 0 0 50px 0;
font-size: 10px;
font-size: 2.6666666vw;
font-size:clamp(9px, 2.6666666vw, 11.0px);
-moz-font-feature-settings: "palt" 1;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
letter-spacing: 0.099em;
}
.link_list_jp ul{
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
/*DNP ShueiGoGinStd L*/
font-family: "dnp-shuei-gothic-gin-std", sans-serif;
font-weight: 400;
font-style: normal;
}
.link_list_jp ul li{
position: relative;
width: 50%;
margin: 0;
padding: 0;
display: inline-block;
}
.link_list_jp ul li div{
line-height: 2.2;
}
.link_list_jp ul li .text_area::before{
position: relative;
content: '・';
padding: 0 4px 0 0;
}
.link_list_jp ul li a{
margin: 0 0 0 0;
color: #000;
text-decoration: none;
transition:opacity 0.3s ease;
}
.link_list_jp ul li a:hover{
opacity:0.5;
}

/*トップへ*/
#pagetop{
position: relative;
width: 100%;
text-align: right;
margin: 0 0 30px 0;
padding: 0;
cursor: pointer;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}
#pagetop img{
width: 64px;
display: inline-block;
}
#pagetop:hover{
opacity: 0.5;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}

/*ロゴ2種類*/
.logo_two{
width:100%;
margin: 0 auto 30px auto;
/*全体 */
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
/*子要素を折り返しせず、1行に配置（wrapが複数行OK）*/
/*天地下に揃える */
-webkit-align-items: flex-end;
align-items:flex-end;
}
.logo_two .logo_first{
flex-basis: 50%;
}
.logo_two .logo_first img{
width: 80px;
margin: 0;
}
.logo_two .logo_second{
width: 133px;
flex-basis: 50%;
text-align: right;
}
.logo_two .logo_second img{
display: inline-block;
height: 10px;
width: auto;
}
.copyright{
width: 100%;
margin: 0;
padding: 0 0 10px 0;
text-align: right;
font-size: 8px;
}