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

html {height: 100%;color: #3e2723;font-feature-settings : "palt";/*background-color: #faf7ef;*/font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;font-weight: 500;font-feature-settings: "palt";}
#bg01 {background: url(../img/1.png); }
#bg02 {background: url(../img/2.png);}
#bg03 {background: url(../img/3.png);}
.clear{clear:both;}
.FltLft{float: left;}
.FltRgt{float: right;}

.bg1{background-color:#F0F0F0;}
.BgBlk {background-color: #424242;}
.BgBlk:hover {background-color: #222222;}
.BgBlu {background-color: #2072a3;}
.BgBlu:hover {background-color: #005082;}
.BgSky {background-color: #26C6DA;}
.BgSky:hover {background-color: #0097A7;}
.BgRed {background-color: #dd5060;}
.BgRed:hover {background-color: #c03547;}
.BgPRd {background-color: #EF5350;}
.BgPRd:hover {background-color: #D32F2F;}
.BgPur {background-color: #AB47BC;}
.BgPur:hover {background-color: #7B1FA2;}
.BgYel {background-color: #ffca28;}
.BgYel:hover {background-color: #FBC02D;}
.BgGrn {background-color: #66bb6a;}
.BgGrn:hover {background-color: #388E3C;}
.BgPnk {background-color: #EC407A;}
.BgPnk:hover {background-color: #C2185B;}
.BgOrg {background-color: #FF7043;}
.BgOrg:hover {background-color: #E64A19;}
.BgGry {background-color: #757575;}
.BgGry:hover {background-color: #BDBDBD;}

.BdR004{border-radius: 4px;}
.BdR010{border-radius: 10px;}
.Mgt010 {margin-top: 10px;}
.Mgt020 {margin-top: 20px;}
.Mgt030 {margin-top: 30px;}
.Mgt040 {margin-top: 40px;}
.Mgt050 {margin-top: 50px;}
.Mgt100 {margin-top: 100px;}
.Mgt200 {margin-top: 200px;}
.Mgt250 {margin-top: 250px;}
.Mgt300 {margin-top: 300px;}
.Mgb010 {margin-bottom: 10px;}
.Mgb020 {margin-bottom: 20px;}
.Mgb030 {margin-bottom: 30px;}
.Mgb040 {margin-bottom: 40px;}
.Mgb050 {margin-bottom: 50px;}
.Mgb100 {margin-bottom: 100px;}
.Mtb010	{margin: 10px 0 10px 0;}
.Mtb020	{margin: 20px 0 20px 0;}
.Mtb030	{margin: 30px 0 30px 0;}
.Mtb040	{margin: 40px 0 40px 0;}
.Mtb050	{margin: 50px 0 50px 0;}
.Mgl010 {margin-left: 10px;}
.Mgl020 {margin-left: 20px;}
.Mgl030 {margin-left: 30px;}
.Mgl040 {margin-left: 40px;}
.Mgl050 {margin-left: 50px;}
.Mgl100 {margin-left: 100px;}
.Mlr010 {margin-left: 10px; margin-right: 10px;}
.Mlr020 {margin-left: 20px; margin-right: 20px;}
.Mlr030 {margin-left: 30px; margin-right: 30px;}
.Mlr040 {margin-left: 40px; margin-right: 40px;}
.Mlr050 {margin-left: 50px; margin-right: 50px;}
.Mlr100 {margin-left: 100px; margin-right: 100px;}
.Mgn10 {margin: 10px;}
.Pdb040 {padding-bottom: 40px;}
.Plr010 {padding-left: 10px; padding-right: 10px;}
.Plr020 {padding-left: 20px; padding-right: 20px;}
.Plr030 {padding-left: 30px; padding-right: 30px;}
.Plr040 {padding-left: 40px; padding-right: 40px;}
.Plr050 {padding-left: 50px; padding-right: 50px;}
.Ptb010{padding-top: 10px; padding-bottom: 10px;}
.FntWgt600 {font-weight: 600;}

.Fnt005 {font-size: 0.5rem;}
.Fnt006 {font-size: 0.6rem;}
.Fnt008 {font-size: 0.8rem;}
.Fnt009 {font-size: 0.9rem;}
.Fnt010 {font-size: 1rem;}
.Fnt013 {font-size: 1.3rem;}
.Fnt015 {font-size: 1.5rem;}
.Fnt016 {font-size: 1.6rem;}
.Fnt015{font-size: 1.5rem;}
.Fnt018 {font-size: 1.8rem;}
.Fnt020 {font-size: 2rem;}

.Wdt20{width:20%;}
.Wdt30{width:30%;}
.Wdt40{width:40%;}
.Wdt60{width:60%;}
.Wdt80{width:80%;}
.Hgt100{height:100px;}
.Hgt200{height:200px;}
.Hgt300{height:300px;}
.WtdM100{min-width: 100px;}
.WtdM200{min-width: 200px;}

.BtnWap a {font-weight: bold; line-height: 3rem; padding: 10px 30px; color: #ffffff; text-decoration: none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;}
.BtnWap a:link {color: #ffffff;}


/*ふわふわ1*/
.fuwafuwa {
-webkit-animation: fuwafuwa 3s infinite linear alternate;	animation: fuwafuwa 3s infinite linear alternate;}
@-webkit-keyframes fuwafuwa {0% {c-webkit-transform:translate(0, 0) rotate(-5deg);}50% {-webkit-transform:translate(0, -5px) rotate(0deg);}100% {-webkit-transform:translate(0, 0)rotate(5deg);}}
@keyframes fuwafuwa {0% {transform:translate(0, 0) rotate(-5deg);}50% {transform:translate(0, -5px) rotate(0deg);}100% {transform:translate(0, 0)rotate(5deg);}}
/*ふわふわ2*/
.fuwafuwa2 {
-webkit-animation: fuwafuwa2 3s infinite linear alternate;	animation: fuwafuwa2 2s infinite linear alternate;}
@-webkit-keyframes fuwafuwa2 {0% {-webkit-transform:translate(0, 0) rotate(-5deg);}50% {-webkit-transform:translate(5px, -10px) rotate(0deg);}100% {-webkit-transform:translate(0, 0)rotate(5deg);}}
@keyframes fuwafuwa2 {0% {transform:translate(0, 0) rotate(-5deg);}50% {transform:translate(5px -10px) rotate(0deg);}100% {transform:translate(0, 0)rotate(5deg);}}




@media screen and (max-width: 768px) {
body{height: 100%; margin: 0;}
.FltLft{float: inherit;}
section{margin: 0 auto; padding: 0 10px;}
#Toe{z-index: 10; position: absolute;}
#Toe img{ width: 80px;}
.TxtCnt {text-align: center;}
.GHcTit {margin: 200px 0 0 0; position: absolute; z-index: 10; text-shadow:0px 0px 5px #ffffff;}
.GHcTit {font-size: 1rem; font-weight: 600; line-height: 2rem;}
.GHcTit strong{font-size: 1.5rem; line-height: 2rem;}
h2 {font-size: 1.4rem;}
h3 {font-size: 1.2rem;}



input[type=text] { padding: 5px 10px; border: none; border-radius: 3px; background: #ffffff;border: 1px solid #ccc;}
input[name=btn_confirm], input[name=btn_submit], input[name=btn_back] {margin-top: 10px; padding: 10px 40px; font-size: 100%; color: #fff; cursor: pointer; border: none;border-radius: 3px!important; box-shadow: 0 3px 0 #2887d1; background: #4eaaf1; font-size: 1.4rem; font-weight: 600;}
input[name=btn_back] {margin-right: 20px; box-shadow: 0 3px 0 #777; background: #999;}
.element_wrap {margin-bottom: 10px; padding: 10px 0; border-bottom: 1px solid #ccc; overflow: hidden;}
.element_wrap label{float: left;}
.element_wrap p {display: inline-block; margin:  0; text-align: left;}
textarea[name=contact] {padding: 5px 10px; width: 90%; height: 100px; border: none; border-radius: 3px; background: #ffffff;border: 1px solid #ccc;}
.error_list {padding: 10px 30px; color: #ff2e5a; text-align: left; border: 1px solid #ff2e5a; border-radius: 5px;}


/*メイキングtitle*/
.GHcMkg{text-align: center; padding: 120px 0;}
.MainImg{overflow: hidden;}
.MainImg001{width: 140%; margin-left:-80px; }
.MainImg002{width: 60%; margin:0 auto; display: block;}
#GhcCct1 .GhcTtl{text-align: center; padding: 0;}
.GhcSmpImg{margin: 0 auto; text-align: center;}
.GhcSmpImg img{text-align: center; margin: 20px;  width: 60%; border-radius: 170px;}
.GhcSmpImg img{text-align: center; margin: 20px;  width: 60%; border-radius: 170px;}
.GhcSmpImg span {display: block; margin: 0 30px; text-align: center; font-size: 1rem; font-weight: 600;}
	
/*選択してください*/
.GHcMkgTxt{text-align: center; font-size: 1.4rem; display: block; border-bottom: 3px solid #ef9a9a; padding: 20px; margin: 0 auto 40px;}


.GhcBoxLne {padding: 0 0 80px; background: url(../img/ghc_line.png); background-position: bottom; background-repeat: no-repeat;}
.GhcLin {margin: -14px auto 0; border: 3px solid #ef9a9a; width: 270px;}
.GhcStp1::before {background: url(../img/ghc_step_1.png);}
.GhcStp2::before {background: url(../img/ghc_step_2.png);}
.GhcStp3::before {background: url(../img/ghc_step_3.png);}
.GhcStp4::before {background: url(../img/ghc_step_4.png);}
.GhcStp5::before {background: url(../img/ghc_step_5.png);}
.GhcStp1::before, .GhcStp2::before, .GhcStp3::before, .GhcStp4::before, .GhcStp5::before {content: ""; height: 88px; width: 100px; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 auto;}

/*GhcStp1*/
.GhcStp1Img1{width: 130px; margin: 0 10px 0 0;}
.GhcStp1Img2{width: 160px;}
.GhcKwiGbi{text-align: center; background-image: url(../img/a3.png);background-repeat: no-repeat; background-position: center;}

/*GhcCct2*/
.GhcCct2Img3{width: 120px;}

/*GhcStp3*/
.GhcStp3Img1{width: 100%;}
	
/*GhcStp4*/
.GhcStp4Img1{width: 100%;}
.GhcStp4Img6{width: 60%;}
.GhcStp4Img7{width: 30%;}
	
/*生地イメージ*/
.KijImg {text-align: center; overflow: hidden; margin:0 auto;}
.KijImg strong {display: block; font-size: 1.5rem; font-weight: 600; text-align: center; margin: 60px 0 0 0;}
.KijImg div {margin: auto;}
.KijImg p {width: 34%; float: left; margin: 8%;}
.KijImg p br{display: none;}
.KijImg img {display: block; text-align: center; margin: 0px; width: 100%; border-radius: 170px;}
.KijImg span {font-size:0.8rem; font-weight: 600;}

/*メイキングボタン*/
.GhcMkgBtn{display: none;}
.GhcMkgBtn img{margin: 0 10px; padding: 6px; width: 100%;}
.GhcMkgBtn a:hover{opacity: 0.6;}
.GhcCheBox {}
.GhcCheBox strong { display: block;}
.GhcCheIll span{text-align: center;width: 140px;}
.GhcCheIll img{width: 94px; padding: 6px;}
.GhcCheIll input, .GhcCheClo input[type="radio"] {display: none;}
.GhcCheIll input[type="radio"]:checked + label img {border: 6px solid #ef9a9a; border-radius: 20px; padding: 0; background: #ffffff;}
.GhcCheClo span{text-align: center; width: 35px;}
.GhcCheClo img{ width: 35px; border-radius:50px; display: block; padding: 6px;margin: 0 8px;}
.GhcCheClo input[type="radio"]:checked + label img {border: 6px solid #ef9a9a; border-radius: 60px; padding: 0;}
.element_wrap_title {padding: 20px 0 20px 0; text-align: center;}
.element_wrap_title span {background: #ef9a9a; padding: 0 15px; display: inline-block; font-weight: 600;}
.element_wrap_data {width: 100%; float: left; font-size: 0.8rem; font-weight: 600; text-align: center;}

.element_wrap_data_etc{margin: 40px 0 0 0; display: inline-block;}

/*iosボタン*/
input[type="submit"] {-webkit-appearance: none; border-radius: 0;}

/*メイキングボタン_オプション*/
.element_wrap_title_Opt {padding: 20px 0 20px 0; text-align: center;}
.element_wrap_title_Opt span {background: #ef9a9a; padding: 0 15px; display: inline-block; font-weight: 600;}
.GhcCheIll_Opt span{text-align: center; width: 90px;}
.GhcCheIll_Opt img{width: 90px; padding: 6px;}
.GhcCheIll_Opt input, .GhcCheClo input[type="radio"] {display: none;}
.GhcCheIll_Opt input[type="radio"]:checked + label img {border: 6px solid #ef9a9a; border-radius: 20px; padding: 0; background: #ffffff;}

footer {width: 96%; margin: 60px auto 0 auto; clear: both; border-top: 1px solid #cccccc; padding: 20px 2%; font-size: 0.7rem; line-height: 1.5rem;}
footer .footer_wap{margin: 0 auto;max-width: 1200px;}
footer span {padding: 0 20px 0 0;}
footer .address {overflow: hidden; float: left; text-align: left; line-height: 1rem;}
footer .footer_link{font-size: 0.7rem; text-align: center; clear: both; width: 100%;}
footer .footer_link a{display: block;}
.Flogo {float: left; margin: 0 30px 0 0;}
.copyright {margin: 00px 0 10px 0; clear: both;  text-align: center;}


/*お客様情報*/
.CasNam {margin-bottom: 10px;padding: 10px 0; overflow: hidden; element_wrapmargin: 20px 80px;}
.CasNam label{float: left;}
.CasNam input {width: 90%; height: 20px; padding: 5px;}
.CasNam label {width: 100%;}
.CasBtn {text-align: center;}

/*確認画面*/
.NyknWap{width: 90%; padding: 20px; margin: 0 auto;}
.NyknTit{font-size: 1.5rem; font-weight: 600; margin: 100px 0 40px; text-align: center;}
.Nykn {margin-bottom: 10px; overflow: hidden; padding: 0 20px; font-weight: 600; font-size: 0.7rem;}
.Nykn label{width: 50%; float: left;}
.Nykn p {float: left; margin: 0;}
.NyknOptTit{font-size: 1.5rem; font-weight: 600; margin: 40px; text-align: center;}
.NyknOptWap{}
.NyknOpt{}

/*送信完了*/
.SonKroWap {height: 80%; width: 100%; display: table; font-size: 1.4rem; font-weight: 600;}
.SonKro {display: table-cell; text-align: center; vertical-align: middle;}
.SonKro p{margin-top: 10px; font-size: 100%; color: #fff; cursor: pointer; border: none; border-radius: 3px!important; box-shadow: 0 3px 0 #2887d1; background: #4eaaf1; font-size: 1.4rem; font-weight: 600; width: 100px; margin: 30px auto;}


}


/*　601　*/
@media screen and (min-width:769px) {
html{font-size: 1.3rem;}
#GhcWap{min-width: 1180px; padding: 0 20px; margin: 0 auto;}
section{width: 1200px; margin: 0 auto;}
#Toe{z-index: 10; position: absolute;}
.TxtCnt {	text-align: center;}
#GhcCct1{margin-top: 40px;}
.GHcTit {margin: 400px 0 0 0; position: absolute; z-index: 10;}
.GHcTit {font-size: 2rem; font-weight: 600; line-height: 4rem;}
.GHcTit strong{font-size: 3.5rem;line-height: 4rem;}
h2 {font-size: 1.5rem;}


input[type=text] { padding: 5px 10px; border: none; border-radius: 3px; background: #ffffff;border: 1px solid #ccc;}
input[name=btn_confirm], input[name=btn_submit], input[name=btn_back] {margin-top: 10px; padding: 10px 40px; font-size: 100%; color: #fff; cursor: pointer; border: none;border-radius: 3px!important; box-shadow: 0 3px 0 #2887d1; background: #4eaaf1; font-size: 1.4rem; font-weight: 600;}
input[name=btn_back] {margin-right: 20px; box-shadow: 0 3px 0 #777; background: #999;}
.element_wrap {margin-bottom: 10px; padding: 30px 0; border-bottom: 1px solid #ccc; overflow: hidden;}
.element_wrap label{float: left; margin: 0 2px;}
.element_wrap p {display: inline-block; margin:  0; text-align: left;}
textarea[name=contact] {padding: 5px 10px; width: 60%; height: 100px; border: none; border-radius: 3px; background: #ffffff;border: 1px solid #ccc;}
.error_list {padding: 10px 30px; color: #ff2e5a; text-align: left; border: 1px solid #ff2e5a; border-radius: 5px;}

/*メイキングtitle*/
.GHcMkg{font-size: 3.5rem; text-align: center; padding: 120px;}
.MainImg{}
.ManBox{}
.MainImg002{margin: -190px 0 0 0;}

/*選択してください*/
.GHcMkgTxt{text-align: center; font-size: 1.4rem; display: block; border-bottom: 3px solid #ef9a9a; padding: 20px; width: 340px; margin: 0 auto 40px;}

.GhcBoxLne {padding: 0 0 80px; background: url(../img/ghc_line.png); background-position: bottom; background-repeat: no-repeat;}
.GhcLin {margin: -14px auto 0; border: 3px solid #ef9a9a; width: 270px;}
.GhcStp1::before {background: url(../img/ghc_step_1.png);}
.GhcStp2::before {background: url(../img/ghc_step_2.png);}
.GhcStp3::before {background: url(../img/ghc_step_3.png);}
.GhcStp4::before {background: url(../img/ghc_step_4.png);}
.GhcStp5::before {background: url(../img/ghc_step_5.png);}
.GhcStp1::before, .GhcStp2::before, .GhcStp3::before, .GhcStp4::before, .GhcStp5::before {content: ""; height: 88px; width: 100px; display: block; background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 auto;}

/*GhcCct2*/	
.GhcCct2Img3{margin: -50px 0 0 200px;}
	
/*生地イメージ*/
.KijImg {text-align: center; overflow: hidden; margin:0 auto;}
.KijImg strong {display: block; font-size: 1.5rem; font-weight: 600; text-align: center; margin: 60px 0 0 0;}
.KijImg div {margin: auto;}
.KijImg p {width: 260px; float: left; margin: 20px;}
.KijImg img {display: block;		text-align: center;margin: 20px; width: 260px;border-radius: 170px;}
.KijImg span {font-size:1rem; font-weight: 600;}

/*メイキングボタン*/
.GhcMkgBtn{text-align: center; margin: 100px 0;}
.GhcMkgBtn img{margin: 0 10px; padding: 6px;}
.GhcMkgBtn a:hover{opacity: 0.6;}
.GhcKwiGbi{text-align: center; height: 550px; background-image: url(../img/a3.png);background-repeat: no-repeat; background-position: center;}
.GhcCheBox {}
.GhcCheBox strong { display: block;}
.GhcCheIll span{text-align: center;width: 140px;}
.GhcCheIll img{width: 140px; padding: 6px;}
.GhcCheIll input, .GhcCheClo input[type="radio"] {display: none;}
.GhcCheIll input[type="radio"]:checked + label img {border: 6px solid #ef9a9a; border-radius: 20px; padding: 0; background: #ffffff;}
.GhcCheClo span{text-align: center; width: 35px;}
.GhcCheClo img{ width: 35px; border-radius:50px; display: block; padding: 6px;margin: 0 20px;}
.GhcCheClo input[type="radio"]:checked + label img {border: 6px solid #ef9a9a; border-radius: 60px; padding: 0;}
.element_wrap_title {float: left; width: 20%; padding: 20px 0 0 0;}
.element_wrap_title span {background: #ef9a9a; padding: 0 15px; display: inline-block; font-weight: 600;}
.element_wrap_data {width: 80%; float: left; font-size: 0.8rem; font-weight: 600; text-align: center;}
.element_wrap_data_etc{margin: 40px 0 0 0; display: inline-block;}

/*iosボタン*/
input[type="submit"] {-webkit-appearance: none; border-radius: 0;}

/*メイキングボタン_オプション*/
.element_wrap_title_Opt {float: left; width: 20%; padding: 20px 0 0 0;}
.element_wrap_title_Opt span {background: #ef9a9a; padding: 0 15px; display: inline-block; font-weight: 600;}
.GhcCheIll_Opt span{text-align: center; width: 90px;}
.GhcCheIll_Opt img{width: 90px; padding: 6px;}
.GhcCheIll_Opt input, .GhcCheClo input[type="radio"] {display: none;}
.GhcCheIll_Opt input[type="radio"]:checked + label img {border: 6px solid #ef9a9a; border-radius: 20px; padding: 0; background: #ffffff;}

footer {width: 100%; margin: 60px auto 0 auto; clear: both; border-top: 1px solid #cccccc; padding: 20px 0; font-size: 0.7rem; line-height: 1.5rem;}
footer .footer_wap{margin: 0 auto;max-width: 1200px;}
footer span {padding: 0 20px 0 0;}
footer .address {overflow: hidden; float: left; text-align: left; line-height: 1rem;}
footer .footer_link{font-size: 0.7rem; float: right;}
.Flogo {float: left; margin: 0 30px 0 0;}
.copyright {margin: 20px 0 10px 0; clear: both; text-align: center;}


/*お客様情報*/
.CasNam {margin-bottom: 10px;padding: 10px 0;overflow: hidden; element_wrapmargin: 20px 80px;}
.CasNam span{float: left;}
.CasNam input {width: 500px; height: 20px; padding: 5px;}
.CasNam span {width: 20%;}
.CasBtn {text-align: center;}

/*確認画面*/
.NyknTit{font-size: 1.5rem; font-weight: 600; margin: 100px 0 40px; text-align: center;}
.Nykn {margin-bottom: 10px; overflow: hidden; padding: 0 20px; font-weight: 600;}
.Nykn p {float: left; margin: 0;}
.Nykn span {width: 40%; float: left;　margin:0 10px 0 0;}
.NyknOptTit{font-size: 1.5rem; font-weight: 600; margin: 40px; text-align: center;}
.NyknOptWap{}
.NyknOpt{}
.NyknWap{width:1200px; margin:0 auto;}
/*送信完了*/
.SonKroWap {height: 80%; width: 100%; display: table; font-size: 1.4rem; font-weight: 600;}
.SonKro {display: table-cell; text-align: center; vertical-align: middle;}
.SonKro p{margin-top: 10px; font-size: 100%; color: #fff; cursor: pointer; border: none; border-radius: 3px!important; box-shadow: 0 3px 0 #2887d1; background: #4eaaf1; font-size: 1.4rem; font-weight: 600; width: 100px; margin: 30px auto;}

/*正面横中*/
.GhcSmpImg{ margin: 50px 0 0 0 ;}
.GhcSmpImg img{text-align: center; margin: 20px;  width: 300px; border-radius: 170px;}
.GhcSmpImg span {display: block;float: left; margin: 0 30px;height: 600px; text-align: center;font-size: 1rem; font-weight: 600;}
}