/*
Theme Name: BOMBO-Works
*/

/* ===========================================================================

base

=========================================================================== */
:root {
    --white: #fff;
    --black: #5a5a6a;
    --light-grey: #EDEDED;
    --link-hover:#666;
    --red: #CC755D;
}

/*  Made by Elly Loel - https://ellyloel.com/  */
*{margin:0;padding:0;line-height:calc(.25rem + 1em + .25rem)}*,::after,::before{box-sizing:border-box}:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}body{-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type=file])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}h1{font-size:2em}:where(ul,ol){list-style:none}a:not([class]){text-decoration-skip-ink:auto;text-decoration:none}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){text-decoration:none;cursor:pointer;touch-action:manipulation}:where(input[type=file]){cursor:auto}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{cursor:pointer}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}:focus-visible{transition:outline-offset 145ms cubic-bezier(.25, 0, .4, 1)}:where(:not(:active)):focus-visible{transition-duration:.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type=button],input[type=submit],input[type=reset])[disabled]{cursor:not-allowed}

/* -----------------------------------------------------------
common
----------------------------------------------------------- */
html {
    font-size: 62.5%;
    height: 100%;
}

body {
	color: var(--black);
	background: var(--white);
	font-size: 1.5rem;
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-style: normal;
	letter-spacing: 0.2em;
    height: 100%;
}
a {
	color: var(--black);
	transition: all .3s ease;
	cursor: pointer;
}
a:hover {
	color: var(--link-hover);
}

p,li {
	line-height: 2;
}

section {
	overflow: hidden;
}

ul,li {
	list-style: none;
}
main{
}
.page_normal{
    padding: 10rem 0;
    max-width: 110rem;
    margin: auto;
}
.page_form{
    padding: 20rem 0;
    max-width: 90rem;
    margin: auto;
}
.pc {
	display: block;
}

.sp {
	display: none;
}
section + section{
    margin-top: 20rem;
}
.ly_sec_inner + .ly_sec_inner{
    margin-top: 8rem;
}
@media screen and (max-width: 1500px) and (min-width: 769px) {
	html {
		font-size: 0.6vw;
	}
    html.is_prevent_scroll {
        scroll-behavior: auto !important;
        overflow: hidden;
    }
}
/*
@media (min-aspect-ratio: 17/9) {
	html {
		font-size: 1vh;
	}
}
*/
@media only screen and (max-width: 768px) {
    html{
        /*font-size: 2.5vw;*/
        font-size: 2.125vw;
        -webkit-overflow-scrolling: touch;
    }
	body {
		font-size: 1.65rem;
		overflow-x: hidden;
        width: 100%;
	}
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}
}

h1{
    font-size: 3.2rem;
    text-align: center;
    margin-bottom: 12rem;
}
h2:not(.el_heading_top_2nd){
    font-size: 2.4rem;
    border-bottom: 1px solid var(--black);
    padding: 1rem 0;
    display: inline-block;
    margin-bottom: 4rem;
}
h3:not(.el_heading_top_3rd){
    font-size: 1.8rem;
    padding: 0.8rem 2rem;
    background: var(--light-grey);
    border-left: 2px solid var(--black);
    display: inline-block;
    margin-bottom: 1rem;
    margin-top: 4rem;
}
.el_font_en{
    font-family: "anonymous-pro", monospace;
    letter-spacing: 0.2em;
    font-weight: 100;
}
.ly_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 6rem;
    min-height: 9rem;
}

.bl_nav_list{
    display: flex;
    gap: 2rem;
}
.bl_nav_listitem a{
    display: inline-block;
    padding: 1rem;
}
.ly_footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8rem;
    background: var(--black);
}
.ly_footer a{
    color: var(--white);
}
.copyright{
    font-size: 1.2rem;
    background: var(--black);
    border-top: 0.5px solid var(--white);
    color: var(--white);
    padding: 2rem 8rem;
}
.ly_page_ttlArea{
    margin-bottom: 12rem;
}
/* -----------------------------------------------------------
contatct
----------------------------------------------------------- */
input[type='text'], input[type='tel'], input[type='password'], input[type='email'], input[type='number'], input[type='url'], textarea, select{
border: 1px solid var(--black);
color: var(--black);
font-size: 2.4rem;
}
.el_form_wrap:not(:last-child){
margin-bottom: 4rem;
}
.bl_form_line{
margin-bottom: 12rem;
}
.el_form_wrap.el_form_radio{
margin-bottom: 1.875rem;
}
.el_form_wrap.el_form_textarea{
align-items: flex-start;
}
.el_form_wrap.el_form_textarea .el_form_ttlArea{
padding-top: 1em;
}
.el_form_ttlArea{
margin-bottom: 1rem;
}
.el_form_ttl{
font-weight: 600;
display: flex;
align-items: center;
gap: 1rem;
}
.el_form_radio_outer{
display: flex;
margin-bottom: 1.25rem;
}
.el_form_radio_outer:last-child{
margin-bottom: 0;
}
/*
.el_form_radio_inner{
margin-right: 1.875rem;
}
*/
.el_form_ttlRequire{
background: var(--black);
color: var(--white);
border-radius: .5rem;
display: inline-block;
padding: 0.5rem 1rem;
}
.el_form_detailArea{
flex: 1 1 auto;
flex-basis: calc(100% - 22rem);
}
.el_form_text_full{
padding: 1rem 2rem;
border-radius: .5rem;
width: 100%;
}
.el_form_textarea_full{
padding: 2rem 2rem;
border-radius: .5rem;
width: 100%;
}
/*
.el_form_radioTtl {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding-left: 2rem;
position: relative;
width: auto;
}
*/
.el_form_radioTtl{
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
}
.el_form_wrap .wpcf7-list-item{
margin: 0;
}
.el_form_radioTtl .wpcf7-list-item label{
display: inline-block;
margin-right: 4rem;
margin-bottom: 1rem;
box-sizing: border-box;
cursor: pointer;
padding-left: 4rem;
position: relative;
width: auto;
}
.el_form_radioTtl .wpcf7-list-item label::before {
background: #fff;
border: 1px solid var(--black);
border-radius: 50%;
content: '';
display: block;
height: 3rem;
width: 3rem;
left: 0;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
box-sizing: border-box;
}
.el_form_radioTtl .wpcf7-list-item label::after {
background: var(--black);
border-radius: 50%;
content: '';
display: block;
height: 1.5rem;
width: 1.5rem;
left: .75rem;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
transition: 0.2s;
}
input[type=radio] {
display: none;
}
.el_form_radioTtl .wpcf7-list-item label.checked::after {
opacity: 1;
}
.el_form_radioTtl .wpcf7-list-item:nth-child(2){
position: relative;
flex-basis: 60%;
}
.el_form_radioTtl .wpcf7-list-item:nth-child(2):after{
content: "";
display: block;
}

.el_form_privacy{
text-align: center;
margin-top: 12rem;
}
.el_form_checkbox_inner .wpcf7-list-item label {
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding-left: 2.5rem;
position: relative;
width: auto;
font-weight: 700;
}
.el_form_checkbox_inner .wpcf7-list-item label:before {
content: '';
display: block;
height: 1.75rem;  /* 28px */
width: 1.75rem;  /* 28px */
background: var(--white);
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
box-sizing: border-box;
}
.el_form_checkbox_inner .wpcf7-list-item label::after {
border-right: 3px solid var(--black);
border-bottom: 3px solid var(--black);
content: '';
display: block;
height: 1rem;     /* 16px */
width: 0.6rem;
left: 9px;
top: -5px;
opacity: 0;
position: absolute;
transform: rotate(45deg);
bottom: 0;
margin: auto;
transition: 0.2s;
}
input[type=checkbox] {
opacity: 0;
position: absolute;
}
.el_form_checkbox_inner .wpcf7-list-item label.checked::after {
opacity: 1;
}

.el_form_privacy .el_form_checkbox_inner{
min-height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
input[type='text']:focus, input[type='tel']:focus, input[type='password']:focus, input[type='email']:focus, input[type='number']:focus, input[type='url']:focus, textarea:focus, select:focus {
border-color: var(--black);
outline: none;
}
.el_form_wrap .wpcf7-not-valid-tip{
padding: 5px 0;
color: var(--red);
font-weight: 600;
}
.contact-form-information{
margin-bottom: 4rem;
}
.wpcf7-spinner {
    visibility: hidden !important;
}
.el_btn_contact_outer{
    text-align: center;
}
.el_btn_contact_outer p{
    display: inline-block;
}
.el_btn_contact_outer input {
    background: var(--black);
    color: var(--white);
    border-radius: 0.5rem;
    min-height: 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    padding: 2rem 4rem;
    font-weight: 700;
    transition: .3s;
    min-width: 40rem;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
    border-color: var(--red);
}
.ly_btn_outer{
    display: flex;
    justify-content: center;
}
.bl_btn_form input {
    background: var(--black);
    color: var(--white);
    text-decoration: none;
    font-size: 1.8rem;
    display: inline-block;
    padding: 2rem 4rem;
    box-shadow: 4px 4px 0px var(--light-grey);
    border-radius: 0.5rem;
    overflow: auto;
}
@media only screen and (max-width: 768px) {
    .el_form_wrap{
    display: block;
    }
    .el_form_wrap.el_form_radio {
    margin-bottom: 1.25rem;  /* 20px */
    }
    .el_form_radio .el_form_ttlArea{
    margin-bottom: 1.25rem;  /* 20px */
    }
    .el_form_ttlArea{
    margin-bottom: .25rem;  /* 10px */
    }
    .el_form_radioTtl .wpcf7-list-item label{
    font-size: .925rem;
    padding-left: 1.75rem;
    }
    .el_form_radioTtl .wpcf7-list-item:nth-child(2){
    flex-basis: 55%;
    }
    .el_form_radio_outer{
    flex-wrap: wrap;
    margin-bottom: 0;
    }
    .el_form_radio_inner{
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    }
    input[type='text'], input[type='tel'], input[type='password'], input[type='email'], input[type='number'], input[type='url'], textarea, select{
    font-size: 1.125rem;
    }
    .el_form_privacy p{
    font-size: .875rem;  /* 14px */
    }
    #contact_confirm .el_form_radio .el_form_ttlArea{
    margin-bottom: 0;
    }
    #contact_confirm .el_form_radio_inner{
    margin-bottom: 0;
    }
    #contact_confirm .el_form_wrap.el_form_radio{
    margin-bottom: .625rem;
    }
    #contact_confirm .el_form_wrap.el_form_textarea .el_form_ttlArea{
    padding-top: 0;
    }
    #contact_confirm .el_btn_contact_outer + .el_btn_contact_outer{
    margin-left: 0;
    margin-top: 1rem;
    }
    #contact_confirm .ly_contact .bl_btnWrap{
    display: block;
    }
}

.ly_service_ttlArea{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.el_service_subttl{
    font-size: 1.6rem;
    
}
.el_txt_place{
    font-size: 2.4rem;
}
.ly_service_contArea{
    
}
.ly_service_contArea > *{
    margin-bottom: 4rem;
    
}
.bl_service_detailWrap{
    background: var(--light-grey);
    padding: 2rem;
}
.el_txt_detail{
    
}
.bl_service_sampleImage{
    display: flex;
    gap: 4rem;
    justify-content: center;
    padding: 4rem;
}
.bl_imgWrap{
    box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.15);
}
.bl_service_btn{
    text-align: center;
}
.bl_form_btn{
    text-align: center;
    margin-top: 4rem;
}
.el_btn_form{
    background: var(--black);
    color: var(--white);
    text-decoration: none;
    font-size: 1.8rem;
    display: inline-block;
    padding: 2rem 4rem;
    box-shadow: 4px 4px 0px var(--light-grey);
    border-radius: 0.5rem;
    overflow: auto;
}
.el_btn_form:hover{
    background: var(--link-hover);
    color: var(--white);
}
.ly_link_r{
    text-align: right;
}
.bl_link{
    margin-left: auto;
    display: inline-block;
    padding: 1rem;
    position: relative;
    border-bottom: 1px solid var(--black);
}
.el_link_line{
    color: var(--black);
    text-decoration: none;
}
.bl_dot_list{
    padding-left: 1.5em;
}
.bl_dot_list li{
    list-style: disc;
}
.ly_mainVisual{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6rem;
    min-height: calc(100vh - 9rem);
    background: var(--light-grey);
}
.ly_mainVisual img{
    max-width: 50vh;
    object-fit: contain;
}
.el_heading_top_2nd{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.el_heading_top_2nd .el_heading_en{
    color: var(--black);
    font-size: 4rem;
}
.el_heading_top_2nd .el_heading_jp{
    font-size: 1.5rem;
}
.ly_top_contArea{
    padding: 16rem 0;
}
.ly_slide{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.bl_slide_item{
    box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.15);
}
.ly_sec_flex_row{
    display: flex;
    gap: 8rem;
}
.el_heading_top_3rd{
    font-size: 2.4rem;
    text-align: center;
    color: var(--black);
}
.ly_top_sec{
    margin-top: 12rem;
}
.el_service_1 .ly_sec_flex_row{
    max-width: 110rem;
    margin: 8rem auto 0;
}
.el_service_1 .el_heading_top_3rd{
    flex: 1 0 auto;
}
.el_service_1 .ly_link_r{
    margin-top: 4rem;    
}
.el_service_2{
    background: var(--light-grey);
    padding: 8rem;
    display: flex;
    justify-content: center;
}
.el_service_2 .ly_sec_flex_col{
    background: var(--white);
    display: inline-block;
    padding: 8rem;
    max-width: 55rem;
    box-shadow: 8px 8px 40px rgba(193, 193, 193, 0.5);
}
.el_service_2 .el_heading_top_3rd{
    margin-bottom: 6rem;
}