/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */


/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {


.co_topimage {
 width: 100%;
 height: auto;
 display: block;
 aspect-ratio: 4 / 3;
 background-image: url(../img2026/customorder/topimage_pc.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 100% auto;
 margin-top:140px;
}
.coti_body {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding-top:10%;
}

.coti_body h2 {
 order:1;
 width:fit-content;
 height: auto;
 display: block;
 font-size: clamp(20px, 2vw, 50px);
 font-weight: 500;
 line-height: 1em;
 text-align: center;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 padding:0em 1em 0.5em;
 color: var(--color-white);
 border-bottom: 3px solid var(--color-white);
 margin-bottom: 0.5em;
}
.coti_body h3 {
 order:2;
 font-size: clamp(24px, 2.5vw, 50px);
 font-weight: 700;
 line-height: 1.8em;
 color: var(--color-white);
 text-align: center;
 letter-spacing: -0.04em;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 margin-bottom: 0.5em;
}
.coti_body h3 br {
 display: none;
}
.coti_body h3 span {
 display: block;
}
.coti_body p {
 order:3;
 font-size: clamp(16px, 1.2vw, 20px);
 font-weight: 500;
 line-height: 2em;
 color: var(--color-white);
 text-align: center;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 margin-bottom: 0em;
}


/* サービス
--------------------------------------------*/
.customservice {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 gap: 3%;
 margin: 0 auto 70px;
}
.customservice li {
 flex:0 0 calc((100% - 3% * 3) / 4);
 border:3px solid var(--color-1st);
 padding:90px 1em 1em 1em;
 font-size: 24px;
 font-weight: 700;
 text-align: center;
 color:var(--color-1st);
 border-radius: 15px;
 background-repeat: no-repeat;
 background-position: center 15px;
 background-size: auto 70px;
}
.customservice li span {
 display: block;
 font-size:14px;
}



/* 対応車種
--------------------------------------------*/
.custom_models {
 width: 100%;
 max-width:1024px;
 height: auto;
 display: flex;
 gap: 10%;
 margin: 0 auto 30px;
}
.custom_models li {
 flex:0 0 calc((100% - 10% * 2) / 3);
}
.custom_models li .cm_img {
 width: 100%;
 height: auto;
 display: block;
}
.custom_models li p {
 width: 100%;
 height: auto;
 display: block;
 text-align: center;
 font-size:16px;
 line-height: 1em;
 color:var(--color-black);
 padding-top:0.8em;
 margin:0;
}


/* その他車両持ち込みカスタム例
--------------------------------------------*/
.customexample {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
}
.customexample li {
 width:25%;
}


/* 日帰りカスタムサービス
--------------------------------------------*/
.onedaycustom {
 width: 100%;
 max-width:1920px;
 height: auto;
 display: block;
 padding:50px 8% 100px;
 margin:0 auto;
}
.onedaycustom h2.oneday_title01 {
 font-size: clamp(22px, 1.5vw, 40px);
 font-weight: 700;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: center;
 margin-bottom: 0.25em;
}
.onedaycustom h3.oneday_title02 {
 font-size: clamp(32px, 3vw, 100px);
 font-weight: 900;
 line-height: 1.25em;
 color: var(--color-black);
 text-align: center;
 margin-bottom: 0.5em;
}
.onedaycustom p {
 font-size: clamp(14px, 1vw, 16px);
 font-weight: 400;
 line-height: 2em;
 color: var(--color-black);
 text-align: center;
}
.onedaycustom h4.oneday_title03 {
 font-size: clamp(16px, 1.25vw, 30px);
 font-weight: 600;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: center;
 margin-bottom: 0.25em;
}
.onedaycustom h5.oneday_title04 {
 width:fit-content;
 height: auto;
 display: block;
 font-size: clamp(24px, 2vw, 40px);
 font-weight: 800;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: center;
 margin:0 auto 0.75em;
}
ul.onday_spot {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap:1%;
}
ul.onday_spot li {
 flex:0 0 calc((100% - 1% * 2) / 2);
 height: auto;
 display: block;
 border:1px solid var(--color-1st);
 border-radius: 15px;
 padding:2em 1em;
 margin-bottom: 20px;
}
ul.onday_spot li h3.oneday_title05 {
font-size: clamp(18px, 1.5vw, 30px);
font-weight: 700;
line-height: 1.25em;
color: var(--color-black);
text-align: center;
 margin-bottom: 0.5em;
}
ul.onday_spot li p.oneday_ic_car {
width: fit-content;
height: 30px;
display: block;
font-size: clamp(14px, 1.2vw, 20px);
font-weight: 600;
line-height: 30px;
color: var(--color-1st);
text-align: center;
padding:0 0 0 35px;
background-image: url(../img2026/header/ic-car.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 30px;
margin:0 auto 0.5em;
}
ul.onday_spot li p.oneday_ic_walk {
width: fit-content;
height: 30px;
display: block;
font-size: clamp(14px, 1.2vw, 20px);
font-weight: 500;
line-height: 30px;
color: var(--color-1st);
text-align: center;
padding:0 0 0 35px;
background-image: url(../img2026/header/ic-walk.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 30px;
margin:0 auto 0.5em;
}
ul.onday_spot li p.oneday_add {
 font-size: clamp(14px, 1vw, 20px);
font-weight: 400;
line-height: 2em;
color: var(--color-black);
text-align: center;
margin:0 auto 0em;
}
ul.onday_spot li p.oneday_url {
 font-size: clamp(14px, 1vw, 20px);
font-weight: 400;
line-height: 2em;
color: var(--color-black);
text-align: center;
margin:0 auto 0em;
}


}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {


 .co_topimage {
 width: 100%;
 height: auto;
 display: block;
 aspect-ratio: 7 / 6;
 background-image: url(../img2026/customorder/topimage_m.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 100% auto;
 margin-top:140px;
}
.coti_body {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding-top:10%;
}

.coti_body h2 {
 order:1;
 width:fit-content;
 height: auto;
 display: block;
 font-size: clamp(20px, 2vw, 50px);
 font-weight: 500;
 line-height: 1em;
 text-align: center;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 padding:0em 1em 0.5em;
 color: var(--color-white);
 border-bottom: 3px solid var(--color-white);
 margin-bottom: 0.5em;
}
.coti_body h3 {
 order:2;
 font-size: clamp(24px, 3.5vw, 50px);
 font-weight: 700;
 line-height: 1.8em;
 color: var(--color-white);
 text-align: center;
 letter-spacing: -0.04em;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 margin-bottom: 0.5em;
}
.coti_body h3 span {
 display: block;
}
.coti_body p {
 order:3;
 font-size: clamp(16px, 1.2vw, 20px);
 font-weight: 500;
 line-height: 2em;
 color: var(--color-white);
 text-align: center;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 margin-bottom: 0em;
}


/* サービス
--------------------------------------------*/
.customservice {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 5%;
 margin: 0 auto 70px;
}
.customservice li {
 flex:0 0 calc((100% - 5% * 1) / 2);
 border:3px solid var(--color-1st);
 padding:90px 1em 1em 1em;
 font-size: 24px;
 font-weight: 700;
 text-align: center;
 color:var(--color-1st);
 border-radius: 15px;
 background-repeat: no-repeat;
 background-position: center 15px;
 background-size: auto 70px;
 margin-bottom: 30px;
}
.customservice li span {
 display: block;
 font-size:14px;
}



/* 対応車種
--------------------------------------------*/
.custom_models {
 width: 100%;
 max-width:1024px;
 height: auto;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 margin: 0 auto 30px;
}
.custom_models li {
 width:45%;
 height: auto;
 display: block;
 margin:0 2.5% 30px;
}
.custom_models li .cm_img {
 width: 100%;
 height: auto;
 display: block;
}
.custom_models li p {
 width: 100%;
 height: auto;
 display: block;
 text-align: center;
 font-size:16px;
 line-height: 1em;
 color:var(--color-black);
 padding-top:0.8em;
 margin:0;
}


/* その他車両持ち込みカスタム例
--------------------------------------------*/
.customexample {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
}
.customexample li {
 width:33.3333333333%;
}


/* 日帰りカスタムサービス
--------------------------------------------*/
.onedaycustom {
 width: 100%;
 height: auto;
 display: block;
 padding:50px 8% 100px;
 margin:0 auto;
}
.onedaycustom h2.oneday_title01 {
 font-size: clamp(22px, 1.5vw, 40px);
 font-weight: 700;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: center;
 margin-bottom: 0.25em;
}
.onedaycustom h3.oneday_title02 {
 font-size: clamp(32px, 3vw, 100px);
 font-weight: 900;
 line-height: 1.25em;
 color: var(--color-black);
 text-align: center;
 margin-bottom: 0.5em;
}
.onedaycustom p {
 font-size: clamp(14px, 1vw, 16px);
 font-weight: 400;
 line-height: 2em;
 color: var(--color-black);
 text-align: center;
}
.onedaycustom h4.oneday_title03 {
 font-size: clamp(16px, 1.25vw, 30px);
 font-weight: 600;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: center;
 margin-bottom: 0.25em;
}
.onedaycustom h5.oneday_title04 {
 width:fit-content;
 height: auto;
 display: block;
 font-size: clamp(24px, 2vw, 40px);
 font-weight: 800;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: center;
 margin:0 auto 0.75em;
}
ul.onday_spot {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap:1%;
}
ul.onday_spot li {
 flex:0 0 calc((100% - 1% * 2) / 2);
 height: auto;
 display: block;
 border:1px solid var(--color-1st);
 border-radius: 15px;
 padding:2em 1em;
 margin-bottom: 20px;
}
ul.onday_spot li h3.oneday_title05 {
font-size: clamp(18px, 1.5vw, 30px);
font-weight: 700;
line-height: 1.25em;
color: var(--color-black);
text-align: center;
 margin-bottom: 0.5em;
}
ul.onday_spot li p.oneday_ic_car {
width: fit-content;
height: 30px;
display: block;
font-size: clamp(14px, 1.2vw, 20px);
font-weight: 600;
line-height: 30px;
color: var(--color-1st);
text-align: center;
padding:0 0 0 35px;
background-image: url(../img2026/header/ic-car.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 30px;
margin:0 auto 0.5em;
}
ul.onday_spot li p.oneday_ic_walk {
width: fit-content;
height: 30px;
display: block;
font-size: clamp(14px, 1.2vw, 20px);
font-weight: 500;
line-height: 30px;
color: var(--color-1st);
text-align: center;
padding:0 0 0 35px;
background-image: url(../img2026/header/ic-walk.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 30px;
margin:0 auto 0.5em;
}
ul.onday_spot li p.oneday_add {
 font-size: clamp(14px, 1vw, 20px);
font-weight: 400;
line-height: 2em;
color: var(--color-black);
text-align: center;
margin:0 auto 0em;
}
ul.onday_spot li p.oneday_url {
 font-size: clamp(14px, 1vw, 20px);
font-weight: 400;
line-height: 2em;
color: var(--color-black);
text-align: center;
margin:0 auto 0em;
}


}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {


 .co_topimage {
 width: 100%;
 height: auto;
 display: block;
 aspect-ratio: 3 / 4;
 background-image: url(../img2026/customorder/topimage_m.webp);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: 100% auto;
 margin-top:80px;
}
.coti_body {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding-top:15%;
}

.coti_body h2 {
 order:1;
 width:fit-content;
 height: auto;
 display: block;
 font-size: clamp(16px,3vw, 100px);
 font-weight: 700;
 line-height: 1em;
 text-align: center;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 padding:0em 1em 0.5em;
 color: var(--color-white);
 border-bottom: 2px solid var(--color-white);
 margin-bottom: 0.5em;
}
.coti_body h3 {
 order:2;
 font-size: clamp(16px, 4vw, 100px);
 font-weight: 800;
 line-height: 1.8em;
 color: var(--color-white);
 text-align: center;
 letter-spacing: -0.04em;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 margin-bottom: 0.5em;
}
.coti_body h3 span {
 display: block;
}
.coti_body p {
 order:3;
 width: 100%;
 height: auto;
 display: block;
 padding:0 8%;
 font-size: clamp(12px, 3vw, 18px);
 font-weight: 500;
 line-height: 2em;
 color: var(--color-white);
 text-align: center;
 text-shadow: 0px 2px 10px rgba(0,0,0,0.4);
 margin-bottom: 0em;
}


/* サービス
--------------------------------------------*/
.customservice {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin: 0 auto 70px;
}
.customservice li {
 width: 100%;
 height: auto;
 display: block;
 border:2px solid var(--color-1st);
 padding:10px 10px 20px 70px;
 font-size: 16px;
 font-weight: 700;
 text-align: left;
 color:var(--color-1st);
 border-radius: 10px;
 background-repeat: no-repeat;
 background-position: 10px 10px;
 background-size: 50px auto;
 margin-bottom: 10px;
}
.customservice li span {
 display: block;
 font-size:12px;
 font-weight:500;
}



/* 対応車種
--------------------------------------------*/
.custom_models {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 margin: 0 auto 30px;
}
.custom_models li {
 width:100%;
 height: auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding:0 0 20px 0;
 margin: 0 0 20px 0;
 border-bottom: 1px dotted var(--color-999);
}
.custom_models li:last-child {
 padding:0 0 0 0;
 margin: 0 0 0 0;
 border-bottom: none;
}
.custom_models li .cm_img {
 width: 45%;
 height: auto;
 display: block;
}
.custom_models li p {
 width: 50%;
 height: auto;
 display: block;
 text-align: left;
 font-size:14px;
 font-weight: 700;
 line-height: 1em;
 color:var(--color-black);
 padding-top:0;
 margin:0;
}
.custom_models li p span {
 display: block;
 font-weight: 500;
 font-size:12px;
 margin-top:5px;
}


/* その他車両持ち込みカスタム例
--------------------------------------------*/
.customexample {
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
}
.customexample li {
 width:50%;
}


/* 日帰りカスタムサービス
--------------------------------------------*/
.onedaycustom {
 width: 100%;
 height: auto;
 display: block;
 padding:50px 8% 100px;
 margin:0 auto;
}
.onedaycustom .odc_topimg {
 margin-bottom: 20px;
}
.onedaycustom h2.oneday_title01 {
 font-size: clamp(16px, 1.5vw, 30px);
 font-weight: 700;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: left;
 margin-bottom: 0.25em;
}
.onedaycustom h3.oneday_title02 {
 font-size: clamp(24px, 2vw, 30px);
 font-weight: 900;
 line-height: 1.25em;
 color: var(--color-black);
 text-align: left;
 margin-bottom: 0.5em;
}
.onedaycustom p {
 font-size: clamp(14px, 1vw, 16px);
 font-weight: 400;
 line-height: 2em;
 color: var(--color-black);
 text-align: left;
}
.onedaycustom h4.oneday_title03 {
 font-size: clamp(14px, 1.25vw, 20px);
 font-weight: 600;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: left;
 margin-bottom: 0.5em;
}
.onedaycustom h4.oneday_title03 br {
 display: none;
}
.onedaycustom h5.oneday_title04 {
 width:fit-content;
 height: auto;
 display: block;
 font-size: clamp(16px, 1vw, 20px);
 font-weight: 700;
 line-height: 1.5em;
 color: var(--color-1st);
 text-align: left;
 margin:0 auto 0.75em;
}
ul.onday_spot {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 gap:1%;
}
ul.onday_spot li {
 width:100%;
 height: auto;
 display: block;
 border:1px solid var(--color-1st);
 border-radius: 15px;
 padding:2em 1em;
 margin-bottom: 20px;
}
ul.onday_spot li h3.oneday_title05 {
font-size: clamp(16px, 1.25vw, 24px);
font-weight: 700;
line-height: 1.25em;
color: var(--color-black);
text-align: center;
 margin-bottom: 0.5em;
}
ul.onday_spot li p.oneday_ic_car {
width: fit-content;
height: 30px;
display: block;
font-size: clamp(14px, 1.2vw, 20px);
font-weight: 600;
line-height: 30px;
color: var(--color-1st);
text-align: center;
padding:0 0 0 35px;
background-image: url(../img2026/header/ic-car.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 30px;
margin:0 auto 0.5em;
}
ul.onday_spot li p.oneday_ic_walk {
width: fit-content;
height: 30px;
display: block;
font-size: clamp(14px, 1.2vw, 20px);
font-weight: 500;
line-height: 30px;
color: var(--color-1st);
text-align: center;
padding:0 0 0 35px;
background-image: url(../img2026/header/ic-walk.webp);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 30px;
margin:0 auto 0.5em;
}
ul.onday_spot li p.oneday_add {
 font-size: clamp(14px, 1vw, 20px);
font-weight: 400;
line-height: 2em;
color: var(--color-black);
text-align: center;
margin:0 auto 0em;
}
ul.onday_spot li p.oneday_url {
 font-size: clamp(14px, 1vw, 20px);
font-weight: 400;
line-height: 2em;
color: var(--color-black);
text-align: center;
margin:0 auto 0em;
}


}