@charset "utf-8";

/* 繝ｪ繝ｼ繝峨せ繧ｿ繧､繝ｫ */
.sp_br{ display:none; }

h2{ font-weight:bold; }
#item-lead-noflex h2{ display:inline-block; font-size:40px; font-weight:bold; line-height:1.2; color:#1b76ab; }
div#main p span.marker { background: linear-gradient(transparent 70%, #fff175 30%); }
.lead_text{ font-size:14px; margin-top:15px; }

.lead_intro_wrap{ background:url(../images/original-craft-box.jpg)top right/cover no-repeat; padding:15px 30px 20px; }
.lead_intro{ display:inline-block; text-align:center; font-weight:normal; font-weight:500; text-shadow:0 0 10px #fff,0 0 7px #fff,0 0 5px #fff; }
.lead_intro h2 span{ font-size:22px; color:#222; line-height:2.5; }
.lead_intro p{ font-size:14px; margin-top:10px; letter-spacing:1.1px; }
.intro_br{ display:none; }
.lead_intro dl { display:flex; align-items:center; margin-top:13px; letter-spacing:1.1px;  }
.lead_intro dl dt{ font-size:14px; margin-right:12px;  }
.lead_intro dl dt:last-of-type{ padding-left:20px; border-left:#222 solid 1px; }
.lead_intro dl dd{ display:flex; align-items:center; font-size:32px; color:#1b76ab; font-weight:600; }
.lead_intro dl dd:first-of-type{ margin-right:20px; }
.lead_intro dl dd span{ font-size:14px; margin-left:7px; }

/*
ul.anker{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:35px; }
ul.anker li{ width:205px; border-right:#c4c4c4 1px solid; box-sizing:border-box; }
ul.anker li:last-child{ border-right:none; }
ul.anker li a{ display:block; width:auto; padding-left:80px; padding-bottom:16px; box-sizing:border-box; position:relative; }
ul.anker li a:hover{ opacity:.6; }
ul.anker li:first-child a{ padding-left:72px; background:url(../images/caramel-box-icon.png)10px top no-repeat; }
ul.anker li:nth-child(2) a{ padding-left:75px; background:url(../images/integrated-box-icon.png)15px top no-repeat; }
ul.anker li:nth-child(3) a{ background:url(../images/separeted-box-icon.png)15px top no-repeat; }
ul.anker li:nth-child(4) a{ background:url(../images/pasted-box-icon.png)15px top no-repeat; }
ul.anker li p.anker_sub{ font-size:12.5px; font-weight:500; line-height:1.4; }
ul.anker li p.anker_text{ font-size:16px; color:#1b76ab; font-weight:bold; margin-top:2px; }
ul.anker li a::after{ content:""; display:block; position:absolute; bottom:0; left:50%; width:7px; height:7px; border-right:2px #1b76ab solid; border-bottom:2px #1b76ab solid; transform:rotate(45deg) translate(-50%); transition:.2s ease; }
ul.anker li a:hover::after{ bottom:-4px; }
*/

/* 紹介
----------------------------------------------------------- */
.foreword{ margin:40px auto 0; padding:0 25px; text-align:center; }
.foreword h2{  position:relative; display:inline-block; margin-top:-40px; padding:12px 20px; line-height:1; font-size:16px; background:#fff; border:#555 1px solid; border-radius:100vmax; }
.foreword h2::after{ content:""; position:absolute; z-index:10; left:50%; bottom:-7px; display:block; width:12px; height:12px; background:#fff; border-right:1px solid #555; border-bottom:1px solid #555; transform:translateX(-50%)rotate(45deg); }
.foreword .slide_wrap{ display:flex; overflow:hidden; margin-top:-20px; padding:35px 0 20px 5px; background:#f2f2f2; }
.foreword .slide_wrap:hover ul{ animation-play-state: paused; }
.foreword ul{ animation: scroll-left 30s infinite linear .5s both;  display:flex; justify-content:space-around; }
.foreword ul li{ width: calc(100% / 6);font-size:13px; font-weight:bold; min-width:110px; margin-right:20px; }
.foreword ul li img{ width:90%; height:auto; margin-bottom:5px; }
/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@media screen and (max-width: 750px) {
.foreword{ padding:0; }
.foreword ul li{ margin-right:15px; }
}

.normal{  margin-top:70px;font-size:14px; }
.normal .h2_deco{  text-align:center; position:relative;  }
.normal .h2_deco:before{ position:absolute; right:50%; top:-45%; z-index:-1; color:#cceefd; font-size:1.6rem; font-weight:bold; letter-spacing:0.5px;  }
.ref .h2_deco:before{ content:"References"; }
.flow .h2_deco:before{ content:"Order Flow"; }
.box_list .h2_deco:before{ content:"Types of Box"; }
.normal h2{ display:flex; align-items:center; font-size:2rem; letter-spacing:1rem; }
.normal h2:before,.normal h2:after{ content:""; flex-grow:1; height:1px; background:#555; }
.normal h2:before{ margin-right:1rem; }
@media screen and (max-width: 750px) {
.normal .h2_deco:before{ top:-80%; font-size:1.4rem; }
}
@media screen and (max-width: 440px) {
.ref ul li{ width:100%; }
.normal h2{ font-size:1.7rem; letter-spacing:0.5rem; }
}

/* 制作例
----------------------------------------------------------- */
.ref ul{ margin:0 25px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; }
.ref ul li:not(.btn){ width:47%; display:flex; flex-direction:column-reverse; margin-top:40px; }
.ref ul li img{ width:100%; max-width:380px; height:auto; border:1px #ccc solid; }
.ref ul li .btn img{ width:100%; height:auto; }
.ref ul li ul.btnWrapper{ margin:10px 0; justify-content:flex-start; }
.ref ul li ul.btnWrapper li.btn{ margin-right:8px; width:18%; cursor:pointer; }
.ref .text_area{ margin:5px auto 20px auto;  }
.ref h3{ font-weight:bold; font-size:1.4rem; color:#333; letter-spacing:0.2rem; }
.ref .text_area p{ margin-top:10px; font-size:0.95rem; line-height:1.8; }
@media screen and (max-width: 750px) {
.ref ul{ margin:20px 10px 0; }
.ref ul li:not(.btn){ margin-top:20px; }
.ref h3{ font-size:1.3rem; }
.ref .text_area p{ line-height:1.9; letter-spacing:0.1rem; }
}
@media screen and (max-width: 630px) {
.ref ul:not(.btnWrapper){ display:block; }
.ref ul li:not(.btn){ width:100%; margin:30px auto auto; }
.ref ul li img{ max-width:initial; }
}

/* 発注フロー
----------------------------------------------------------- */
.flow ol{ margin:0 15px; margin-left:45px; }
.flow ol li{ position:relative; display:flex; justify-content:center; align-items:normal; margin-top:40px;  }
.flow ol li:after{ content:""; position:absolute; bottom:calc(-50% + 2px); left:22%; display:block; width:60px; height:24px; transform:translate(-50%); border:30px solid transparent; border-bottom:24px solid transparent; border-top:24px solid #cceefd; box-sizing:border-box; }
.flow ol li:last-child:after{ display:none; }
.flow ol li .flow_title{ position:relative; display:flex; justify-content:space-between; align-items:center; width:32%; height:cover; background:#cceefd; margin-right:10px; }
.flow ol li .flow_title .step_no{ margin-left:-19%; display:flex; justify-content:center; align-items:center; width:34%; min-width:115px; aspect-ratio:1/1; height:auto; background:#fff; border:#4d9adb 1px dashed; border-radius:50%; font-weight:bold; color:#4a97d8; text-align:center; line-height:1; letter-spacing:1px; position:relative; }
.flow ol li .flow_title .step_no p{ position:absolute; bottom:25px; transform:translate(-50%);}
.flow ol li .flow_title .step_title{ display:flex; justify-content:center; text-align:center; width:100%;  }
.flow ol li .flow_title .step_title h3{ font-size:1rem;  color:#333; font-weight:bold; }
.flow ol li .flow_explain{ width:63%; background:#f2f2f2; padding:0 40px; display:flex; align-items:center; box-sizing:border-box; font-size:1rem; line-height:1.8; }
.flow ol li .flow_explain span{ font-weight:bold; color:#005eae; }
.flow .flow_contact{ margin-top:40px; font-size:1rem; font-weight:bold; text-align:center; }
#wrap .flow .flow_contact p:first-child{ color:#333; line-height:1.7; width:90%; margin:0 auto; }
#wrap .flow .flow_contact .flow_contact_btn a{ display:inline-block; font-size:1.35rem; color:#fff; background:#efb91b; padding:28px 35px; margin-top:25px; border-radius:10px; }
#wrap .flow .flow_contact .flow_contact_btn a:hover{ opacity:0.5; }
.flow .flow_contact .flow_contact_btn a:before{ content:url(../../../common/images/form-icon.png); margin-right:20px; vertical-align:middle; }

.flow ol li:nth-child(1) .flow_title .step_no{ background:url(../images/mail-phone.png)center 35% no-repeat #fff; }
.flow ol li:nth-child(2) .flow_title .step_no{ background:url(../images/data-submittion.png)center 30% no-repeat #fff; }
.flow ol li:nth-child(3) .flow_title .step_no{ background:url(../images/calibration-sample.png)center 30% no-repeat #fff; }
.flow ol li:nth-child(4) .flow_title .step_no{ background:url(../images/delivery.png)center 25% no-repeat #fff; }
@media screen and (max-width: 750px) {
.flow ol li{  display:block; width:90%; margin:0 auto; margin-top:50px; letter-spacing:0.1rem;  }
.flow ol li:after{ bottom:-55px; left:50%; }
.flow ol li .flow_title{ position:relative;  width:100%; padding:15px; line-height:1.6; margin:0; box-sizing:border-box; min-height:81px; }
.flow ol li .flow_title .step_no{ position:absolute; top:0; left:0; margin-left:0; transform:translateX(-50%); width:18%; min-width:90px; max-width:115px; }
.flow ol li .flow_title .step_no p{ bottom:10px; }
.flow ol li .flow_explain{ width:100%; padding:20px 40px 20px 40px; font-size:0.9rem; }
}
@media screen and (max-width: 520px) {
.flow ol{ margin:0 10px; margin-left:40px; }
.flow ol li{ width:100%; }
.flow ol li .flow_title .step_no{ transform:translateX(-50%); }
.flow ol li .flow_explain{ padding:20px 25px 20px 25px; }
#wrap .flow .flow_contact p:first-child{ text-align:left; }
#wrap .flow .flow_contact .flow_contact_btn a{ font-size:1.1rem; padding:25px 20px; width:85%; }
.flow .flow_contact .flow_contact_btn a:before{ margin-right:10px; }
}

/* 箱の種類
----------------------------------------------------------- */
.box_list{ margin-top:90px; }
.box_list h3{ font-size: 22px;font-weight: bold;line-height: 1;border-left: 6px solid #4a97d8;letter-spacing: 1px;padding: 5px 10px;margin-bottom: 20px;vertical-align: middle;}
.box_unit{ margin-top:60px; }
/*.box_list .min_lot{ text-indent:15px; padding-top:6px; }
.box_list .min_lot_br{ display:none; }*/
.box_list img{ width:230px; height:auto; border:#ccc 1px solid; }
.box_list #caramel_box{ margin-top:35px; }
.box_list .box_inner{ display:flex; align-items:flex-start; flex-direction:row-reverse; }
.box_list .box_inner img{ margin-right:30px; }
.box_list .box_inner p.catch_text{ font-weight:bold; font-size:18px; color:#1b76ab; }
.box_list .box_inner p.text{ margin-top:8px; line-height:1.7; }
.box_list .box_inner h4{ display:inline-block; margin-top:20px; padding:5px 13px; font-weight:bold; color:#1b76ab; background:#cceefd; border-radius:5px; position:relative; }
.box_list .box_inner h4::before{ content:""; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); border:transparent 10px solid; border-top:#cceefd 12px solid; }
.box_list .box_inner ul{ padding-top:15px; position:relative; width:100%; display:flex; flex-wrap:wrap; }
.box_list .box_inner ul::before{ content:""; position:absolute; right:0; top:-17px; display:block; width:calc(100% - 180px); height:1px; background:#c4c4c4; }
.box_list .box_inner ul li{ margin-bottom:8px; margin-right:3px; font-weight:500; padding-left:16.5px; text-indent:-11.5px; box-sizing:border-box; }
.box_list .box_inner ul li:nth-child(odd){ width:calc(48% - 3px); }
.box_list .box_inner ul li:nth-child(even){ width:calc(52% - 3px); }
.box_list .box_inner ul li::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#4d9adb; }
@media screen and (max-width: 750px) {
.box_list .box_inner{ flex-direction:column-reverse; }
}

/* お問合せ・e-myリンク共通
----------------------------------------------------------- */
.contact,.other_link{ padding-bottom:30px; text-align:center; font-size:16px; font-weight:bold; letter-spacing:1px; }
.h2_icon{ display:grid; place-items:center; background:#fff; min-height:66px; padding:5px; margin-bottom:15px; box-sizing:border-box; position:relative; }
.h2_icon::after{ content:""; position:absolute; bottom:-20px; left:50%; margin-left:-8px; border:8px solid transparent; border-top:12px solid #FFF; z-index:1;}
.contact h2,.other_link h2{ display:inline-block; font-size:16px; position:relative; }
.contact h2::before,.other_link h2::before{ vertical-align:middle; position:absolute; top:50%; left:0; margin-top:-25px; }
.contact .lead_text,.other_link .lead_text{ font-size:15px; color:#666; padding:0 15px; }
.contact .contact_bnr,.other_link .emy_bnr{ display:flex; justify-content:center; margin:15px auto 0 auto; }
.contact h2 .sp_br,.other_link h2 .sp_br{ display:none; }

/* お問合せバナー
----------------------------------------------------------- */
.contact{ background:#f5f2e9; margin-top:60px; }
.contact .h2_icon{ border:8px #f5f2e9 solid; }
.contact h2{ color:#4a97d8; padding-left:60px; }
.contact h2::before{ content:url(../../../common/images/beginner-mark.png); }
.contact .form_btn{ width:350px; background:#cd4b4a; box-shadow: 0 4px 0 0 #aa3c3c; transition:.1s; border-radius:8px; padding:18px 10px; }
.contact .form_btn:hover{ transform:translateY(4px); box-shadow:0 0 0 0 #aa3c3c; opacity:.85; }
.contact .form_btn p{ color:#fff; }
.contact .btn_title{ display:inline; font-size:22px; position:relative; padding-left:50px; }
.contact .btn_title::before{ vertical-align:middle; position:absolute; top:50%; left:0; margin-top:-17px; }
.contact .form_btn .btn_title::before{ content:url(../../../common/images/form-icon.jpg); }
.contact .btn_sub{ margin-top:5px; font-size:14px; }
.contact .tel_contact{ width:312.5px; margin-left:40px; background:#fff; border-bottom:4px #fff solid; border-radius:8px; padding:18px 10px; color:#cd4b4a; }
.contact .tel_contact .btn_title::before{ content:url(../../../common/images/tel-icon.jpg); }

/* e-myリンクバナー
----------------------------------------------------------- */
.other_link{ background:#ecf4e3; margin:30px 0 50px 0; }
.other_link .h2_icon{ border:8px #ecf4e3 solid; }
.other_link h2{ color:#006934; padding-left:130px; }
.other_link h2::before{ content:url(../../../common/images/quick-delivery.png); }
.other_link span{ color:#f39800; }
.other_link .emy_bnr{ align-items:center; }
.other_link .emy_bnr > p{ letter-spacing:0.1px; color:#006934; font-size:20px; padding:13px 0; margin-right:27px; }
.other_link .emy_bnr > p span{ letter-spacing:-0.3px; padding:0 2px; }
.other_link .emy_link{ background:#fff; border-radius:8px; box-shadow:0 4px 0 0 #ddd; letter-spacing:0.5px; }
.other_link .emy_link .btn_title{ background:#7fc71b; color:#fff; font-size:18px; padding:8px; border-radius:8px 8px 0 0; }
.other_link .btn_sub{ color:#77b529; padding:10px 10px; font-size:15px; }
.other_link .emy_link img{ margin:0 5px; vertical-align:text-bottom; }
.other_link a img#emy_logo:hover{ opacity:1; /*画像個別の透過設定をリセット*/ }

.other_link .emy_link:hover{ transform:translateY(4px); box-shadow:0 0 0 0 #ccc; transition:.1s; opacity:.85; }

@media screen and (max-width: 750px) {
#item-lead-noflex img{ width:100%; height:auto; display:block; margin:0 auto; text-align:center; }

.pc_br{ display:none; }
.sp_br{ display:block; }

.lead_intro_wrap{ padding:15px 20px 30px; }
#item-lead-noflex h2{ font-size:35px; }
.lead_intro h2 span{ font-size:17px; }
.lead_intro p{ font-size:13px; margin-top:12px; letter-spacing:0.3px; }
.lead_intro dl{ margin-top:21px; }
.lead_intro dl dt{ font-size:14px; margin-right:7px; }
.lead_intro dl dd{ font-size:25px; }
.lead_intro dl dd span{ font-size:14px; margin-left:4px; }
.lead_intro dl dt:last-of-type{ padding-left:15px; }
.lead_intro dl dd:first-of-type{ margin-right:15px; }

.textarea,.anker,.item_detail,#results,.orderflow,.normal{ padding:0 10px; }
.contact,.other_link{ margin-left:10px; margin-right:10px; }
div#main p.lead_text{ line-height:1.6em; }

.scroll{ overflow-x:scroll; padding-bottom:10px; scrollbar-width:thin; }
/*ul.anker li{ width:100%;  }
ul.anker li{ border-right:none; border-bottom:#c4c4c4 1px solid; margin-top:10px; padding-bottom:0; }
ul.anker li:nth-child(n+3){ margin-top:10px; position:relative; }
ul.anker li a{ padding-left:55px!important; background-position:0 top!important; background-size:48px!important; }
ul.anker li a::after{ bottom:50%; left:auto; right:0; width:7px; height:7px; border-right:2px #1b76ab solid; border-bottom:2px #1b76ab solid; transform:rotate(45deg) translate(-50%); transition:.2s ease; }
ul.anker li a:hover::after{ bottom:calc(50% - 6px); }*/

/* 商品詳細
----------------------------------------------------------- */
.box_list h3{ float:none; margin-bottom:5px; margin-top:15px; }
/*.box_list .min_lot{ margin-bottom:15px; }*/
div#main .box_list .box_inner{ line-height:1.6; margin:10px 5px 0 15px; }
.box_list img{ width:auto; max-width:100%; text-align:center; }
.box_list .box_inner p.catch_text{ margin-top:10px; }
div#main .box_list .box_inner p.text{ margin-top:8px; line-height:1.7; }

.contact h2, .other_link h2{ line-height:1.6; text-align:left; }
.contact .contact_bnr,.other_link .emy_bnr{ display:block; }
.contact .lead_text, .other_link .lead_text{ font-size:14px; }
.contact h2{ padding-left:50px; }
.contact .contact_bnr{ width:370px; }
.contact .form_btn{ margin-bottom:20px; }
.contact .tel_contact{ margin:0 auto; }
.other_link h2{ padding-left:90px; }
.other_link h2::before{ content:url(../../../common/images/sp-quick-delivery.png); margin-top:-17.5px; }
.other_link .emy_bnr > p{ font-size:18px; padding:5px 0 13px 0; margin-right:0; letter-spacing:.8px; }
.other_link .emy_link{ display:inline-block; }
}
@media screen and (max-width: 630px) {
.lead_intro_wrap{ background:#f2f2f2 url(../images/original-craft-box-sp.jpg)bottom right/contain no-repeat; text-align:center; padding:15px 15px 90px; }
}
@media screen and (max-width:440px){
div#main .box_list .min_lot{ text-indent:0; margin-left:15px; line-height:1.6; }
.box_list .min_lot_br{ display:block; }

.orderstep li img{ max-width:100%; height:auto; }
.orderstep .step_no{ font-size:13px; width:100%; }
.step_no span{ font-size:16px; }

.contact h2, .other_link h2{ font-size:15px; letter-spacing:.8px; }
.other_link h2{ padding-left:45px; }
.other_link h2{ padding-left:75px; }
.other_link h2::before{ content:url(../../../common/images/sp2-quick-delivery.png); margin-top:-15px; }
.contact .contact_bnr,.other_link .emy_bnr{ width:95%; }
.contact .form_btn,.contact .tel_contact{ width:100%; box-sizing:border-box; }
.contact .btn_title{ font-size:19px; }
.other_link .emy_link{ width:100%; }
.other_link .emy_link .btn_sub::after{ padding-left:3px; }
.other_link .emy_link .btn_title,.other_link .emy_link .btn_sub{ padding:13px 8px; }
}
@media screen and (max-width:420px){
.other_link .emy_link img{ width:100px; height:auto; margin:0 3px; }
.other_link .emy_link .btn_title,.other_link .btn_sub{ font-size:17px; letter-spacing:.7px; }
.other_link .btn_sub { font-size:14px; }
}
@media screen and (max-width:375px){
.intro_br{ display:block; }
#item-lead-noflex h2{ font-size:30px; }
.lead_intro h2 span{ font-size:16px; }
.lead_intro p{ font-size:13px; margin-top:12px; letter-spacing:0.3px; }
.lead_intro dl{ margin-top:22px; }
.lead_intro dl dt{ font-size:13px; margin-right:6px; }
.lead_intro dl dd{ font-size:22px; }
.lead_intro dl dd span{ font-size:12px; margin-left:3px; }
.lead_intro dl dt:last-of-type{ padding-left:10px; }
.lead_intro dl dd:first-of-type{ margin-right:10px; }
}