@charset "utf-8";

body {
	background: url("assets/images/bg_chiikawa.png") repeat fixed;
	padding: 0 !important;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.75rem;
	color:#231815;
}

div {box-sizing: border-box;}

/* フルードイメージ対応 */
img {
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic;
}
.ie8 img {
	width: auto;
}

/* contents */



.bodywrap {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    background-color: #FBF8F0;
    -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
	position: relative;
}
@media screen and (max-width: 768px) {
    .bodywrap {
		width: 100%;
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
    }
}

.logo {
  position: absolute;
  display: block;
  width: clamp(0px, 7.6vw, 70px);
  top: 15px;
  right: 15px;
  z-index: 1;
}

.logo img {
  transform: scale(1);
  transition: 0.3s ease transform;
}

.logo img:hover {
  transform: scale(1.05);
}

@media screen and (max-width: 768px) {
  .logo {
    width: clamp(0px, 10.7vw, 60px);
    top: clamp(0px, 5.3vw, 20px);
    left: inherit;
    right: 5%;
  }
}

.content { margin: 0 !important; padding: 0 !important; }

.tx18 {font-size: 1.125em;}
.tx-step {color: #B09548; font-size:30px;}
@media screen and (max-width: 767px){.tx-step {font-size:24px;}}
.tx-step b {font-size:166%;}
.tx-keycolor {color: #B09548;}
.tx-88 {font-size:88% !important;}

/*-- メインビジュアル --*/
.mainvisArea {
	position: relative;
}
.mainvisArea .mvImg {
	margin: 0 auto;
	width: 95%;
	padding-top:80px;
}

.mainvisArea .mvImg picture {
	z-index: 10;
}
.mainvisArea .mvImg img {  }

.topCatch {
    color: #EC6D74;
	padding:1em 1.5em;
    margin: 22px auto 1.5em auto;
    line-height: 150%;
    text-align: center;
	font-size: 1.8rem;
	width:95%;
	letter-spacing:-0.075em;
}

@media screen and (max-width: 640px){
.topCatch { font-size: 72%; width:100%; margin: 0.3em auto 1em auto; }
}


/*-- アイテムエリア --*/
.itemwrap { display: block; width:96%; background:#FFF; border-radius: 10px; margin:0 auto; padding:140px 0 15px 0; position: relative;}
.itemwrap .onpu {position: absolute; top:-52px; right:40px;}
.itemwrap .itemcard picture img {width:99%;}
.itemwrap .itemcard picture img.cardB {margin-top:60px;}
.attcom { color: #A38A77; text-align: right; font-size:1.0rem; margin-right:1em; }
@media screen and (max-width: 640px){
	.itemwrap {padding:80px 0 15px 0; }
	.attcom {font-size:0.9rem; margin-right:0.5em; }
	.itemwrap .onpu {top: -30px; width:40%; right:25px;}
}
.itemwrap .ttl { width:75%; margin: 2em auto; }
.itemwrap .itemoption { width:90%; margin: 2em auto 0.5em auto;}
.itemwrap .itemoption02 { width:95%; margin: 2em auto 0.5em auto;}

/*-- ポスターエリア --*/
.poster { text-align: center; margin:20px auto 50px auto; position: relative; width:80%;}
.poster .pospic {padding-top:100px;}
.poster .chiikawa {position: absolute; top:-80px; left:0; z-index: 10;}
.poscom { text-align: left; font-size:1.25rem; line-height: 140%; }
@media screen and (max-width: 640px){
.poster { width:90%;}
.poster .pospic {padding-top:80px;}
.poster .chiikawa {width:40%;}
.poscom { width:95%; font-size: 55%; margin:0 auto; }
}

.btn-wP .btnto {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 49px;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  width:100%;
}
.btn-wP .btnto {
  background: url(/gentei/order/images/btn_arrow_go.svg) right 20px center no-repeat #B59948;
  display: block;
  font-size: 1.25em;
  line-height: 1.5;
  padding: 20px 40px;
  border: 2px solid #B59948;
  box-sizing: border-box;
}
.btn-wP .btnto:hover {
  background: url(common/images/top/btn_arrow_about.svg) right 20px center no-repeat #FFFFFF;
  color: #B59948;
}
.btn-wP .btnto:clicked {
  background: url(common/images/top/btn_arrow_about.svg) right 20px center no-repeat #FFFFFF;
  color: #B59948;
}


/*-- Attentionご注意 --*/
h2 {
	text-align:center;
	margin:1em auto 1em auto;
	width:42%;
}
h2 img {width:100%;}

.atTention { text-align: center; padding-top:200px; padding-bottom:50px; position: relative;}
.atTention .usagi {position: absolute; top:0; right:25px; z-index: 10;}
.atTention .aTinner {margin:0 auto;}

@media screen and (max-width: 640px){
	h2 {width: 50%;}
	.atTention { padding-top:calc(0.7 * 170px);}
	.atTention .usagi {width:32%; right:20px;}
}
@media screen and (max-width: 480px){.atTention { padding-top:calc(0.55 * 170px);}}

/* アコーディオン */
.aTsumm {
  border-radius: 8px;
  margin: 15px auto 5px auto;
  width:95%;
  text-align: left;
}

@media screen and (max-width: 768px){.aTsumm {width:92% !important;}}

/* アコーディオンのヘッダー */
.aTttl {
  padding: 5px 25px 0 25px;
  background-color: #FFF;
  cursor: pointer;
  outline: none;
  position: relative;
  list-style: none;
  height:50px;
  box-sizing: border-box;
  border-radius: 10px;
  color:#EB6D73;
  font-size:1.25rem;
}

.aT-content {
  padding: 0 25px 5px 25px;
  background-color: #FFF;
  animation:1s forwards attsumm;
  animation-iteration-count: 1;
  border-radius: 0 0 10px 10px;
}

.aT-content .atinner {
  background-image:url("assets/images/line_dot.png");
  background-repeat: repeat-x;
  font-size:1.25rem;
  color:#666;
  padding:10px 0 0 0;
}

.aT-content .atinner p {margin-left:1.45em; text-indent:-1.25em; line-height:125%;}
@media screen and (max-width: 640px){.aTttl {font-size:1.1rem;}}

@keyframes attsumm {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100;
    }
}

.aTttl::after {
  content: "";
  display: inline-block;
  position: absolute;
  background-image:url('assets/images/btn_arrow_extention.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width:24px;
  height:24px;
  right:30px;
  top:15px;
  transition: transform 0.2s ease-in-out; 
}

/* アコーディオンが開いている時 */
.aTsumm[open] .aTttl::after {transform: rotate(180deg);}
.aTsumm[open] .aTttl {border-radius: 8px 8px 0 0;} 
.aTsumm .aTttl::-webkit-details-marker {display: none;}

@media screen and (max-width: 768px){
.aTsumm {width:100%;}
.aT-content ul.flowstep {font-size: 1em !important;}
}

/* ちいかわLink */
.chiikawaLink {text-align: center; margin: 0 auto;}
.chiikawaLink picture {display: block;}

.btn-go {text-align: center;}
.btn-go .abtn {
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 49px;
  text-align: center;
  margin: 0 auto 10px auto;
  background: #EB6D73;
  display: block;
  font-size: 1.5rem;
  padding: 5px;
  width:90%;
  max-width:600px;
  cursor: pointer;
}

img.furuhon {width: 45%;}

@media screen and (max-width: 640px){
	.btn-go .abtn { font-size: 1.15rem;}
	img.furuhon {width: 44%;}
	img.copynagano {width: 15%;}
}
.btn-go .abtn:hover {
  opacity: 0.7;
}

/*
.btn-go .abtn:hover {
  background: url(/gentei/order/images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
.btn-go .abtn:clicked {
  background: url(/gentei/order/images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
*/

.tx-red {color: #CC0000; font-weight: bold;}

@media screen and (min-width: 641px){.SP {display:none;}}