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

/* -----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { vertical-align: bottom; max-width: 100%; width: auto; height: auto; }


html { font-size: 100%; }
body { color: #000; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; min-width: 100%; }


/* -----------------------------------------------------
Layout
----------------------------------------------------- */
#Container { width: 100%; overflow: hidden; position: relative; }

.btn { overflow: hidden; text-align: center; }
.btn > img { margin-bottom: 10px; }
.btn a { position: relative; display: inline-block; }
.btn a:hover::after { content: ""; position: absolute; height: 100%; width: 10px; transform: rotate(45deg); top: -50px; left: 0; background-color: #fff; animation: reflection 4s ease-out infinite; }
.btn a:hover img { animation: fade 4s ease-in-out infinite; }

img.sp,a.sp,table.sp,span.sp { display: none; }
#Contact { display: none; }

.img_panel { text-align: center; margin-bottom: 30px; }
 
/* -----------------------------------------------------
Header
----------------------------------------------------- */
header { width: 100%; background: #FFF; padding: 25px 0; }
header .inner { max-width: 1000px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
header .inner h1 { width: 19%; }
header .inner .btn { margin-top: 0; width: 42%; text-align: center; }
header .inner p { width: 35%; text-align: right; }

.fixed { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; margin: auto; }


/* -----------------------------------------------------
Main Img
----------------------------------------------------- */
#main { /*background: -webkit-linear-gradient(left, rgba(30,95,255,1) 0%,rgba(30,95,255,1) 50%,rgba(27,103,255,1) 51%,rgba(27,103,255,1) 100%);
background: linear-gradient(to right, rgba(30,95,255,1) 0%,rgba(30,95,255,1) 50%,rgba(27,103,255,1) 51%,rgba(27,103,255,1) 100%);*/ background-color: #1d62ff; text-align: center; }


/* -----------------------------------------------------
お得
----------------------------------------------------- */
#goodvalue { background: rgba(255,199,191,0.21); padding-top: 1px; padding-bottom: 50px; }
#goodvalue h2 { max-width: 910px; width: 95%; margin: 45px auto 0 auto; }
#goodvalue .box { box-shadow: 0 0 10px rgba(0,0,0,0.55); max-width: 990px; width: 95%; margin: 35px auto 0 auto; background: #FFF; border-radius: 10px; padding: 40px 20px; text-align: center; box-sizing: border-box; }
#goodvalue .box p.also { margin: 0 auto; max-width: 898px; position: relative; }
#goodvalue .box p.also .img02 { position: absolute; right: -12%; bottom: -4%; width: 31.2%; }


/* -----------------------------------------------------
パネル
----------------------------------------------------- */
#panel { background: url(../images/bg_grid.png); padding: 40px 0 60px 0; text-align: center; }

#panel .video { max-width: 670px; width: 95%; margin: 45px auto 0 auto; }
#panel .video > div { position: relative; height: 0; padding-bottom: 56.25%; }
#panel .video iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
#panel .video + h2 { margin-top: 80px; }

.person { max-width: 1040px; margin: 0 auto; position: relative; z-index: 0; }
.person .left { position: absolute; left: -25px; bottom: -105px; width: 27%; }
.person .left::after { content: ""; display: block; width: 44%; background: url(../images/panel_01.png) no-repeat; background-size: 100% auto; position: absolute; top: -21%; right: 29%; height: 50%; }
.person .right { position: absolute; right: 20px; bottom: -100px; width: 17.5%; }
.person .right::before { content: ""; display: block; width: 71%; background: url(../images/panel_02.png) no-repeat; background-size: 100% auto; position: absolute; top: -40%; right: 30%; height: 55%; }

#panel ul { max-width: 1040px; margin: 5px auto 0 auto; box-sizing: border-box; justify-content: space-around; position: relative; z-index: 1; }
#panel ul li { margin: 10px 0 0 0; max-width: 477px; width: 48%; }

.mtop50 { margin-top: 50px; }

/* -----------------------------------------------------
ご注文
----------------------------------------------------- */
.order { background: url(../images/bg_gray.png); background-size: auto auto; text-align: center; padding: 1px 0 60px 0; }
.flex { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.order ul { position: relative; max-width: 961px; margin: 0 auto; }
.order ul.price { max-width: 100%; }
.order ul li { margin-top: 60px; }
.order ul li.sarani { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.order ul li.sarani img { margin-top: 80px; }

.price li { margin: 0; align-self: baseline; }
.tel { margin-top: 30px; }
.btn { margin: 55px auto 0 auto; max-width: 866px; }
.order .btn a:hover::after { content: ""; position: absolute; height: 100%; width: 30px; transform: rotate(45deg); top: -50px; left: 0; background-color: #fff; }

#Container > h2 { background: #FF130A; text-align: center; margin-top: 60px; position: relative; padding: 15px 0; }
#Container > h2::before { content: ""; display: block; background: url(../images/bg_title.png) repeat-x; height: 13px; width: 100%; position: absolute; top: -7px; }
#Container > h2::after { content: ""; display: block; background: url(../images/bg_title.png) repeat-x; height: 13px; width: 100%; position: absolute; bottom: -7px; transform: scale(1, -1); }

.oisogi li { margin: 0 20px; }
.review { margin-top: 0; }

.laminate { margin: 10px auto 0 auto; max-width: 992px; width: 95%; }
.laminate .box { background: #FFF; border: 1px solid #bebebe; border-radius: 10px; padding: 35px 55px; margin-top: 20px; text-align: left; } 
.laminate .flex { -webkit-justify-content: space-between; justify-content: space-between; }
.laminate .img { width: 31%; margin-top: 20px; }
.laminate .txt { width: 65%; font-size: 1.188em; line-height: 1.5em; margin-top: 20px; }

.laminate table { border-collapse: collapse; border: 1px solid #707070; margin-top: 20px; }
.laminate table td,.laminate table th { border: 1px solid  #707070; padding: 10px; vertical-align: middle; text-align: center; font-weight: bold; }
.laminate table th { background: #daecfa; }
.laminate table.pink th { background: #f2dbe8; }

.laminate table + p { margin-top: 10px; font-size: 0.938em; }

.laminate + p { margin: 30px auto 0 auto; width: 95%; }
.mtop30 { margin-top: 30px; }

/* -----------------------------------------------------
発送
----------------------------------------------------- */
#send { max-width: 990px; margin: 30px auto 0 auto; background: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.55); border-radius: 10px; box-sizing: border-box; padding: 50px; text-align: center; }
#send .schedule { margin-top: 40px; }
#send .flex { margin-top: 40px; }
#send .flex li { position: relative; }
#send .flex li:first-child { display: -webkit-flex; display: flex; }
#send .flex li:first-child::after { content: ""; margin: 0 10px; display: inline-block; width: 34px; height: 52px; background: url(../images/send_07.png); background-size: 100% auto; align-self: center; }

#send .flex li img + img { position: absolute; }
#send .flex li:first-child img + img { top: -115px; left: -10px; }
#send .flex li:last-child img + img { top: -40px; right: -80px; }

/* -----------------------------------------------------
納期
----------------------------------------------------- */
#nouki { padding: 50px 0 0 0; }
#nouki h2 { text-align: center; }

#nouki .box { max-width: 960px; margin: 0 auto; margin-top: 20px; -webkit-justify-content: space-between; justify-content: space-between; }
#nouki .box .img { width: 25%; animation: furufuru 0.2s  infinite; }
#nouki .box ul { width: 74%; font-size: 1.313em; line-height: 1.5em; }
#nouki .box ul li { margin-top: 10px; text-indent: -1.2em; margin-left: 33px; }
#nouki .box ul li::before { content: ""; margin-right: 5px; display: inline-block; width: 28px; height: 27px; background: url(../images/ic_nouki.png); background-size: 100% auto; vertical-align: -0.25em; } 

#nouki .bg { background: rgba(255,199,191,0.21); margin-top: 35px; padding-top: 0px; padding-bottom: 60px; position: relative; z-index: -2; }
#nouki .bg::before { content: ""; width: 100%; height: 35px; display: block; position: absolute; top: -35px;
background: url(../images/bg_nouki.png), -webkit-linear-gradient(left, rgba(255,243,241,1) 0%,rgba(255,243,241,0) 40%,rgba(255,243,241,0) 50%,rgba(255,243,241,0) 60%,rgba(255,243,241,1) 100%);
background: url(../images/bg_nouki.png), linear-gradient(to right, rgba(255,243,241,1) 0%,rgba(255,243,241,0) 40%,rgba(255,243,241,0) 50%,rgba(255,243,241,0) 60%,rgba(255,243,241,1) 100%); background-size: auto 100%; background-repeat: no-repeat; background-position: center; }
#nouki .bg .inner { max-width: 990px; padding-top: 30px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; position: relative; }
#nouki .bg .sttl { width: 100%; text-align: center; }
#nouki .bg h2 { text-align: left; margin-top: 15px; }
#nouki .bg h2 + p { margin-top:40px; font-size: 1.188em; line-height: 1.6em; }
#nouki .bg h2 + p span { color: #ff130a; }
#nouki .bg .txt { width: 57%; }
#nouki .bg .img { width: 42%; text-align: right; position: relative; display: inline-block; }
#nouki .bg .img::after { content: ""; display: block; width: 247px; height: 167px; position: absolute; top: -100px; right: -55px; background: url(../images/nouki_06.png); background-size: 100% auto; }
#nouki .bg .img .animateme { position: absolute; top: -240px; z-index: -1; }


/* -----------------------------------------------------
サービス
----------------------------------------------------- */
#service { padding: 50px 0; }
#service h2 { text-align: center; }

#service .box { max-width: 1070px; margin: 60px auto 0 auto; box-sizing: border-box; border-radius: 10px; padding: 0 0 30px 0; background: #dddddd; }
#service .box ul li { margin: 30px 20px 0 20px }
#service .box ul li img { box-shadow: 3px 3px 3px rgba(0,0,0,0.50); border-radius: 6px; }


/* -----------------------------------------------------
サポート
----------------------------------------------------- */
#support { background: url(../images/bg_grid.png); padding-bottom: 40px; text-align: center; }
#support h2 { background: #6c6c6c; text-align: center; padding: 25px 0; margin-top: 20px; position: relative; }
#support h2 span { position: relative; padding-left: 185px; }
#support h2 span .animateme { position: absolute; bottom: -25px; left: 0; }
#support h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -30px; margin: auto; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 30px 30px 0 30px; border-color: #6c6c6c transparent transparent transparent; }

#support h2 + p { margin-top: 50px; }
#support p { text-align: center; margin-top: 30px; }
#support ul { margin-top: 20px; }
#support ul li { margin: 0 10px; }
#support ul + p { position: relative; display: inline-block; margin: 40px auto 0 auto; }
#support ul + p .animateme { position: absolute; z-index: 0; right: -312px; bottom: -70px; } 
#support + h2,#qa + h2 { margin-top: 0; } 


/* -----------------------------------------------------
口コミ
----------------------------------------------------- */
#kuchikomi { background: url(../images/bg_kuchikomi.png) no-repeat; background-size: contain; background-position: top 95px left 0; padding-bottom: 60px; }
#kuchikomi h2 { background: -webkit-linear-gradient(top, rgba(255,166,0,1) 0%,rgba(211,115,45,1) 100%);
background: linear-gradient(to bottom, rgba(255,166,0,1) 0%,rgba(211,115,45,1) 100%); text-align: center; padding-top: 10px; position: relative; }
#kuchikomi h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -30px; margin: auto; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 30px 30px 0 30px; border-color: #D3732D transparent transparent transparent; }
#kuchikomi h3 { text-align: center; margin-top: 60px; }

#kuchikomi .box { max-width: 1085px; margin: 20px auto 0 auto; box-sizing: border-box; border-radius: 10px; padding: 40px 35px; background: -webkit-linear-gradient(top, rgba(255,226,0,1) 0%,rgba(255,178,0,1) 60%,rgba(255,148,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,226,0,1) 0%,rgba(255,178,0,1) 60%,rgba(255,148,0,1) 100%); }

#kuchikomi .box .flex { background: #FFF; border: 3px solid #ff9800; border-radius: 10px; padding: 35px; -webkit-justify-content: space-between; justify-content: space-between; }
#kuchikomi .box .flex + .flex { margin: 30px 0 0 0; }
#kuchikomi .box .flex .txt { width: 50%; }
#kuchikomi .box .flex .img { width: 48%; text-align: right; }
#kuchikomi .box .col2 { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
#kuchikomi .box .col2 img { width: 50%; height: auto; }
#kuchikomi .box .col2 img + img { width: 47%; height: auto; }
#kuchikomi .box .flex .txt p { font-size: 1.188em; line-height: 1.5em; }


/* -----------------------------------------------------
QA
----------------------------------------------------- */
#qa { background: url(../images/bg_grid.png); padding: 60px 0; }
#qa h2 { text-align: center; }
#qa h3 { text-align: center; margin-top: 15px; }
#qa h3 + p { text-align: center; margin-top: 30px; }

#qa .inner { max-width: 1000px; margin: 0 auto; }

.q,.a { width: 100%; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; align-items: center; margin-top: 30px; }
.q { -webkit-justify-content: flex-start; justify-content: flex-start; }
.a .img { width: 116px; order: 1; }
.q .img { width: 116px; }
.q .txt { background: #f2dbe8; border-radius: 20px; padding: 15px 20px; font-size: 1.500em; line-height: 1.5em; position: relative; box-sizing: border-box; max-width: calc(100% - 120px); margin-left: 50px; }
.a .txt { background: #daecfa; border-radius: 20px; padding: 15px 20px; font-size: 1.188em; line-height: 1.5em; position: relative; box-sizing: border-box; width: calc(100% - 120px); margin-right: 50px; }

.a .txt ul li { text-indent: -1em; margin-left: 1em; }
.a .txt ul li:first-letter { color: #1e5fff; }

.q .txt::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 11px 45px 11px 0; border-color: transparent #f2dbe8 transparent transparent; position: absolute; left: -35px; top: 0; bottom: 0; margin: auto; }
.a .txt::after { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 45px; border-color: transparent transparent transparent #daecfa;position: absolute; right: -35px; top: 0; bottom: 0; margin: auto; }


/* -----------------------------------------------------
Footer
----------------------------------------------------- */
footer { background: #5D5D5D; }
footer nav { background: #FFF; }
footer nav ul { max-width: 1000px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; padding: 30px 0; font-size: 0.938em; line-height: 1.3em; }
footer nav ul li::before,footer nav ul li:last-child::after { content: "｜"; margin: 0 10px; }

footer nav ul li a { color: #000; text-decoration: none; }
footer p { color: #FFF; text-align: center; font-size: 0.938em; padding: 25px; line-height: 1.3em; }


@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    5% { transform: scale(0) rotate(45deg); opacity: 0.3; }
   	6% { transform: scale(4) rotate(45deg); opacity: 1; }
	23% { transform: scale(50) rotate(45deg); opacity: 0; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

@keyframes fade {
	5% { opacity: 1; }
	8% { opacity: 0.7; }
	23% { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes furufuru {
    0% { transform: translate(2px, 0px) rotateZ(0deg); }
    25% { transform: translate(2px, 2px) rotateZ(1deg); }
    50% { transform: translate(2px, 2px) rotateZ(0deg); }
    75% { transform: translate(2px, 0px) rotateZ(-1deg); }
    100% { transform: translate(0px, 0px) rotateZ(0deg); }
}


@media screen and (max-width:1280px) {

header .inner { width: 96%; margin: 0 auto; }


/* -----------------------------------------------------
Main Img
----------------------------------------------------- */
/*#main { background-size: 120% auto, auto 100%,100% 100%; padding-top: 28%; }*/


/* -----------------------------------------------------
ご注文
----------------------------------------------------- */
.order ul { position: relative; }
.order ul li { margin-top: 60px; max-width: 478px; width: 50%; }
.order ul li:last-child { max-width: 961px; width: 100%; }

.order ul.price li,.order ul.price li:last-child { max-width: 490px; width: 48%; box-sizing: border-box; }

.tel { margin: 30px auto 0 auto; width: 96%; }
.btn { margin: 55px auto 0 auto; width: 82%; }

#Container > h2 { padding: 15px 0; }
#Container > h2 img { width: 96%; }
.order ul.oisogi { margin-top: 60px; }
.order ul.oisogi li,.order ul.oisogi li:last-child { margin: 0 1.5%; max-width: 262px; width: 30%; }


.laminate .box { padding: 35px 35px; } 
.laminate .txt { font-size: 1em; line-height: 1.5em; margin-top: 20px; }
.laminate table td,.laminate table th { padding: 10px 5px; font-size: 0.813em; }



/* -----------------------------------------------------
発送
----------------------------------------------------- */
#send { width: 96%; box-sizing: border-box; padding: 30px; }
#send .flex { -webkit-justify-content: space-between; justify-content: space-between; position: relative; }
#send .flex li { width: 45%; }
#send .flex li:first-child { display: block; }
#send .flex li:first-child::after { content: ""; width: 10%; height: 100%; background: url(../images/send_07.png) no-repeat center; background-size: auto auto; position: absolute; top: 0; bottom: 0; left: 105%; margin: auto; }

#send .flex li:first-child img + img { top: -50%; left: -10px; width: 70%; height: auto; }
#send .flex li:last-child img + img { top: -40px; right: -40px; width: 70%; height: auto; }


/* -----------------------------------------------------
納期
----------------------------------------------------- */
#nouki h2 { padding: 0 15px; }
#nouki .box { width: 96%; -webkit-align-items: flex-end; align-items: flex-end; }
#nouki .box ul { padding-bottom: 30px; }

#nouki .bg .inner { width: 96%; }
#nouki .bg h2 { text-align: left; margin-top: 15px; padding: 0; }
#nouki .bg .img::after { top: -100px; right: -20px; }
#nouki .bg .img .animateme { top: -260px; }


/* -----------------------------------------------------
サービス
----------------------------------------------------- */
#service { padding: 50px 0; }
#service h2 { text-align: center; }
#service h2 img { width: 85%; height: auto; }

#service .box { width: 96%; padding: 0 20px 30px 20px; box-sizing: border-box; }
#service .box ul { -webkit-justify-content: space-between; justify-content: space-between; }
#service .box ul li { margin: 30px 0 0 0; width: 48%; }


/* -----------------------------------------------------
サポート
----------------------------------------------------- */
#support h2 { padding: 25px 20px; }
#support h2 span { padding-left: 25%; width: 100%; box-sizing: border-box; display: inline-block; }

#support h2 + p img { width: 73.8%; height: auto; }

#support ul { width: 96%; margin-left: auto; margin-right: auto; }
#support ul li { margin: 0 1%; width: 23%; }
#support ul + p { display: block; }
#support ul + p img:first-child { width: 49.5%; }
#support ul + p .animateme { position: absolute; z-index: 0; right: 40px; bottom: -70px; width: 20%; } 
	

/* -----------------------------------------------------
口コミ
----------------------------------------------------- */
#kuchikomi h2 { padding: 10px 15px 0 15px; }
#kuchikomi h3 { padding: 0 15px; }

#kuchikomi .box { width: 96%; }

#kuchikomi .box .flex { background: #FFF; border: 3px solid #ff9800; border-radius: 10px; padding: 35px; -webkit-justify-content: space-between; justify-content: space-between; }
#kuchikomi .box .flex + .flex { margin: 30px 0 0 0; }
#kuchikomi .box .flex .txt { width: 50%; }
#kuchikomi .box .flex .img { width: 48%; text-align: right; }

#kuchikomi .box .flex .txt p { font-size: 1.188em; line-height: 1.5em; }


/* -----------------------------------------------------
QA
----------------------------------------------------- */
#qa h2 img { width: 30%; }
#qa h3 + p { padding: 0 15px; }

#qa .inner { width: 96%; margin: 0 auto; }

.q,.a { width: 100%; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; align-items: center; margin-top: 30px; }
.q { -webkit-justify-content: flex-start; justify-content: flex-start; }
.a .img { width: 116px; order: 1; }
.q .img { width: 116px; }
.q .txt { background: #f2dbe8; border-radius: 20px; padding: 15px 20px; font-size: 1.500em; line-height: 1.5em; position: relative; box-sizing: border-box; max-width: calc(100% - 120px); margin-left: 50px; }
.a .txt { background: #daecfa; border-radius: 20px; padding: 15px 20px; font-size: 1.188em; line-height: 1.5em; position: relative; box-sizing: border-box; width: calc(100% - 120px); margin-right: 50px; }

.q .txt::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 11px 45px 11px 0; border-color: transparent #f2dbe8 transparent transparent; position: absolute; left: -35px; top: 0; bottom: 0; margin: auto; }
.a .txt::after { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 45px; border-color: transparent transparent transparent #daecfa;position: absolute; right: -35px; top: 0; bottom: 0; margin: auto; }

}


@media screen and (max-width:767px) {

#Contact { display: block; height: 70px; background: rgba(215,215,215,0.80); position: fixed; bottom: 0; right: 0; left: 0; z-index: 1000!important; margin: 0 auto; padding: 10px; box-sizing: border-box; }
#Contact ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; }
#Contact ul li { width: 55%; }
#Contact ul li a { height: 50px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
#Contact ul li:first-child a { color: #FFF; text-align: center; border-radius: 10px; text-decoration: none; font-weight: bold; font-size: 1.125em; align-self: center;
background: -webkit-linear-gradient(-70deg, rgba(255,77,77,1) 0%,rgba(255,77,77,1) 50%,rgba(255,0,0,1) 51%,rgba(255,0,0,1) 100%);
background: linear-gradient(170deg, rgba(255,77,77,1) 0%,rgba(255,77,77,1) 50%,rgba(255,0,0,1) 51%,rgba(255,0,0,1) 100%); }
#Contact ul li:first-child { width: 43%; }
#Contact ul li:last-child a { font-size: 1.375em; color: #000; text-decoration: none; font-weight: bold; }
#Contact ul li:last-child a::before { content: ""; width: 20px; height: 20px; margin-right: 5px; background: url(../images/ic_tel.png) no-repeat; background-size: 100% auto; }

img.sp,a.sp,table.sp,span.sp { display: inline-block; }
table.sp { display: table; }
img.pc,table.pc { display: none; }

br.sp { content: ""; display: inline; }
br.sp::before { content: ""; margin-left: -0.3em; }

/* -----------------------------------------------------
Header
----------------------------------------------------- */
header { width: 100%; background: #FFF; padding: 5px 0; }
header .inner { -webkit-align-items: center; align-items: center; }
header .inner h1 { max-width: 176px; height: auto; width: 45%; }
header .inner .btn { display: none; }
header .inner p { max-width: 210px; height: auto; width: 50%; }


/* -----------------------------------------------------
Main Img
----------------------------------------------------- */
#main { padding-top: 0; }


/* -----------------------------------------------------
お得
----------------------------------------------------- */
#goodvalue h2 { margin: 25px auto 0 auto; }
#goodvalue .box { padding: 20px; }
#goodvalue .box p.also { margin: 20px auto 0 auto; max-width: 898px; position: relative; }
#goodvalue .box p.also .img02 { position: absolute; right: -12%; bottom: 5%; width: 60%; }



/* -----------------------------------------------------
パネル
----------------------------------------------------- */
.img_panel { width: 60%; margin-left: auto; margin-right: auto; }
#panel { padding: 20px 20px 40px 20px; }

.person { width: 95%; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-end; align-items: flex-end; margin-top: 50px; }
.person .left { position: relative; left: 0; bottom: 0; width: 45%; }
.person .left::after { content: ""; display: block; width: 43%; background: url(../images/panel_02_sp.png) no-repeat; background-size: 100% auto; position: absolute; top: -21%; right: 29%; height: 50%; }
.person .right { position: relative; right: 20px; bottom: 20px; width: 25%; }
.person .right::before { content: ""; display: block; width: 71%; background: url(../images/panel_01_sp.png) no-repeat; background-size: 100% auto; position: absolute; top: -40%; right: 30%; height: 55%; }

#panel ul { max-width: 1040px; margin: -22% auto 0 auto; box-sizing: border-box; justify-content: space-around; position: relative; z-index: 1; }
#panel ul li { margin: 20px 0 0 0; max-width: 477px; width: 48%; }
#panel ul li { max-width: 100%; width: 100%; }

#panel .video { margin-top: 25px; }
.mtop50 { margin-top: 50px; }


/* -----------------------------------------------------
ご注文
----------------------------------------------------- */
.order ul li,.order ul li:last-child { margin-top: 0; max-width: 90%; width: 100%; }
.order ul li:first-child { margin-top: 30px; }
.order ul li:first-child + li { margin-top: -10px; }
.order ul li.sarani { display: none; }

.order ul.price li,.order ul.price li:last-child { max-width: 90%; width: 100%; margin-top: 30px; }
.tel,.btn { width: 94%; margin-top: 40px; }

#Container > h2 { padding: 15px 0; }
#Container > h2 img { width: 90%; }
#Container > h2::before { background-size: auto 100%; height: 6px; width: 100%; position: absolute; top: -5px; }
#Container > h2::after { background-size: auto 100%; height: 6px; width: 100%; position: absolute; bottom: -5px; transform: scale(1, -1); }

.order ul.oisogi { margin-top: 40px; }
.order ul.oisogi li:first-child + li { margin-top: 0; }
.order ul.oisogi li,.order ul.oisogi li:last-child { margin: 0 1.5%; max-width: 167px; width: 30%; }
.order ul.oisogi li:first-child { max-width: 100%; width: 100%; }
.order ul.oisogi li:first-child img { max-width: 167px; height: auto; }

.review { width: 96%; margin: 0 auto; }

.laminate .box { padding: 15px; } 
.laminate .sarani { width: 25%; }
.laminate .flex { -webkit-justify-content: space-between; justify-content: space-between; }
.laminate .img { width: 80%; margin-top: 20px; margin-left: auto; margin-right: auto; text-align: center; }
.laminate .txt { width: 100%; font-size: 1em; line-height: 1.5em; margin-top: 20px; }

.laminate table + p { margin-top: 10px; font-size: 0.750em; line-height: 1.3em; text-indent: -1em; margin-left: 1em; }
.laminate table td,.laminate table th { padding: 10px 3px; font-size: 0.750em; }

.laminate + p { margin-top: 30px; }

/* -----------------------------------------------------
発送
----------------------------------------------------- */
#send .schedule { margin-top: 20px; }
#send .flex li:first-child::after { background-size: 17px 26px; align-self: center; }


/* -----------------------------------------------------
納期
----------------------------------------------------- */
#nouki h2 { padding: 0 45px; }
#nouki .box { width: 96%; -webkit-align-items: flex-end; align-items: flex-end; }
#nouki .box ul { padding-bottom: 30px; order: 0; width: 90%; margin: 0 auto; font-size: 1rem; }
#nouki .box .img { order: 1; width: 55%; position: relative; z-index: -1; /*border: 1px solid #000;*/ bottom: -17px; margin: 0 auto; animation: none; }
#nouki .box ul li::before { content: ""; margin-right: 5px; display: inline-block; width: 14px; height: 14px; background: url(../images/ic_nouki.png) no-repeat; background-size: 100% auto; vertical-align: -0.15em; } 

#nouki .bg { margin-top: 18px; padding-top: 0px; position: relative; z-index: 10; padding-bottom: 0; }
#nouki .bg::before { top: -18px; height: 18px; background-size: 640px auto; background-repeat: no-repeat; background-position: center; }

#nouki .bg .sttl { display: none; }
#nouki .bg .txt { width: 96%; margin: 0 auto; }
#nouki .bg h2 + p { font-size: 1rem; line-height: 1.6em; }
#nouki .bg .img { width: 100%; margin-top: 20px; text-align: center; padding-bottom: 50%; }
#nouki .bg .img .sp { width: 96%; margin: 0 auto; }
#nouki .bg .img .animateme { width: 65%; position: absolute; top: auto; bottom: 0; right: -15px; z-index: 1; }
#nouki .bg .img::after { content: ""; display: block; width: 245px; height: 166px; position: absolute; top: auto; bottom: 0; left: 0; right: auto; background: url(../images/nouki_06_sp.png); background-size: 100% auto; }


/* -----------------------------------------------------
サービス
----------------------------------------------------- */
#service h2 img { width: 75%; height: auto; }
#service .box ul li { margin: 30px 0 0 0; width: 100%; text-align: center; }


/* -----------------------------------------------------
サポート
----------------------------------------------------- */
#support h2 { padding: 25px 20px; }
#support h2 span { padding-left: 35%; width: 100%; box-sizing: border-box; display: inline-block; }
#support h2 span .animateme { width: 30%; }

#support h2 + p img { width: 70%; height: auto; }
#support ul { margin-top: 0; }
#support ul li { margin: 20px 1% 0 1%; width: 45%; }

#support ul + p { text-align: left; width: 85%; margin: 30px auto 0 auto; }
#support ul + p img.sp { width: 49.5%; }
#support ul + p .animateme { position: absolute; z-index: 0; right: 0; bottom: -70px; width: 40%!important; } 


/* -----------------------------------------------------
口コミ
----------------------------------------------------- */
#kuchikomi h2 { padding: 15px; }
#kuchikomi h2 img { width: 65%; }

#kuchikomi .box { padding: 20px; }
#kuchikomi .box .flex { padding: 15px; }

#kuchikomi .box .flex .txt { width: 100%; }
#kuchikomi .box .flex .txt p { font-size: 0.875em; }
#kuchikomi .box .flex .img { width: 100%; text-align: center; margin-top: 20px; }


/* -----------------------------------------------------
QA
----------------------------------------------------- */
#qa h2 img { width: 56.5%; }
#qa h3 img { width: 30%; }
#qa h3 + p img { width: 90%; }

#qa .inner { width: 90%; }

.a .img { width: 58px; order: 1; }
.q .img { width: 58px; }
.q .txt { font-size: 0.875rem; line-height: 1.5em; position: relative; box-sizing: border-box; width: calc(100% - 105px); }
.a .txt { font-size: 0.875rem; line-height: 1.5em; position: relative; box-sizing: border-box; width: calc(100% - 105px); }

.q .txt::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 8px 45px 8px 0; border-color: transparent #f2dbe8 transparent transparent; position: absolute; left: -35px; top: 0; bottom: 0; margin: auto; }
.a .txt::after { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 45px; border-color: transparent transparent transparent #daecfa;position: absolute; right: -35px; top: 0; bottom: 0; margin: auto; }



/* -----------------------------------------------------
Footer
----------------------------------------------------- */
footer nav ul { width: 90%; margin: 0 auto; display: block; padding: 30px 0; font-size: 0.875em; line-height: 1.3em; }
footer nav ul li { text-align: center; border-bottom: 1px solid #000000; }
footer nav ul li:first-child { border-top: 1px solid #000000; }
footer nav ul li::before,footer nav ul li:last-child::after { display: none; }

footer nav ul li a { padding: 10px; display: block; }
footer { margin-bottom: 70px; }
}


@media screen and (max-width:414px) {
	.order ul.oisogi li,.order ul.oisogi li:last-child { margin: 0 1.5%; max-width: 167px; width: 45%; }
}

@media screen and (max-width:320px) {
	.laminate table td,.laminate table th { padding: 10px 3px; font-size: 0.563rem; }
}