.ec-layoutRole {
}
.ec-layoutRole {
     background: url("/store/html/user_data/custom/bg.webp") repeat top center;
}
.ec-layoutRole__contents { background:none !important;}
/*=========================================================================================
Header
=========================================================================================*/
.ec-layoutRole__header {
     background: url("/store/html/user_data/custom/bg.webp") repeat top center;
}
.hp_header {
    position: sticky; top: 0; left: 0; z-index: 999;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 16px;
}
.hp_header .inner {
    display: flex; flex-wrap: wrap; justify-content:space-between; align-items: center; gap:20px;
    margin: auto;
    padding:20px 0;
    width: 96%; max-width: 1400px;
}

.hp_header div,
.hp_header p,
.hp_header ul,
.hp_header li { margin:0; padding:0; list-style:none;}

/* Logo */
.hp_header h1 { margin:0; padding:0; width: 33%; max-width: 480px; height: auto;}
.hp_header h1 a { display: block; width:100%; height:auto;aspect-ratio: 793 / 145;}
.hp_header h1 a {
    text-indent: -9999px;
    background: url("/store/html/user_data/custom/logo.webp") no-repeat;
    background-size: 100% auto !important;
}

/* Navigation */
.hp_header #nav {}
.hp_header #nav ul { display: flex; align-items: center; gap:20px;}
.hp_header #nav ul li { position: relative;}
.hp_header #nav ul li a { display: block; text-decoration: none;}
.hp_header #nav ul li p a {
    position: relative;
    display: block;
    color: #000;
    font-size:112.5%;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    line-height: 130%;
    box-sizing: border-box;
}
.hp_header #nav ul li p a span { min-width: inherit;}
.hp_header #nav ul li.contact {
    display: flex; flex-direction: column; justify-content:center; gap:5px;
    padding-left: 20px;
}
.hp_header #nav ul li.contact span { display: block;}
.hp_header #nav ul li.contact .tel a {
    cursor: pointer;
    padding-left: 25px;
    font-family: "Roboto", sans-serif;
    font-size: 175%;
    font-weight: 500;
    color: #12327F;
    letter-spacing: -1px;
    background: url("/store/html/user_data/custom/icon_tel.svg") no-repeat left center;
    background-size: 20px auto;
}
.hp_header #nav ul li.contact .mail a {
    padding-right: 10px;
    font-size: 100%;
    font-weight: 600;
    color: #fff;
    line-height: 32px;
    text-align: center;
    letter-spacing: -1px;
    background:#D8452E url("/store/html/user_data/custom/arrow_w1.svg") no-repeat 95% center;
    background-size: 17px auto;
    border-radius: 5px;
}
@media only screen and (min-width:768px){
    .hp_header #nav ul li a:hover {  color:#476BC4; text-decoration: none;}
    .hp_header #nav ul li.contact a:hover { opacity: 0.7;}
}
@media only screen and (max-width:1370px){
    .hp_header h1 { max-width: 300px;}
    .hp_header #nav ul { gap:20px;}
    .hp_header #nav ul li p a { font-size: 100%;}
    .hp_header #nav ul li.contact .tel a {font-size:150%;}
}
@media only screen and (max-width:1135px){
    .hp_header .inner { justify-content: center;}
    .hp_header h1 { width:300px;}
    .hp_header h1 a { background: url("/store/html/user_data/custom/logo3.webp") no-repeat; aspect-ratio: 455 / 267;}
}
@media only screen and (max-width:768px){
    .hp_header { position:sticky; top: 0; left: 0; padding:0; z-index: 999;} 
    .hp_header .inner { display: block; padding:15px 0; width: 100%; height: 70px;}
    .hp_header h1 { position: relative; left: 10px; width:280px;}
    .hp_header h1 a { background: url("/store/html/user_data/custom/logo4.webp") no-repeat; aspect-ratio: 570 / 88;}
    .nav_btn {
        display: block !important;
        cursor: pointer;
        position:fixed; top:0; right:0;
        width: 70px; height:70px;
        box-sizing: border-box;
        z-index: 999999999;
    }
    .nav_btn span {
        display: inline-block;
        position: absolute; left:0; right: 0; margin:auto;
        width:34px; height:3px;
        background:#071C4E;
        transition: all .3s;
        border-radius: 4px;
    }
    .nav_btn span:nth-of-type(1) { top:17px;}
    .nav_btn span:nth-of-type(2) { top:28px;}
    .nav_btn span:nth-of-type(3) { top:40px;}
    .nav_btn small { position: absolute; bottom:0; width: 100%; font-size: 10px; text-align: center;}
    .nav_btn.active span:nth-of-type(1) { top:28px; transform:rotate(-45deg);}
    .nav_btn.active span:nth-of-type(2) { opacity: 0;}
    .nav_btn.active span:nth-of-type(3) { top:28px; transform:rotate(45deg);}
    .hp_header #nav {
        display:none;
        position: absolute;  top:70px; right: 0;
        width: 100%; height: calc(100vh - 70px);
        overflow: auto;
        background:#071C4E;
        border-top:1px solid #eee;
    }
    .hp_header #nav ul { flex-direction: column; gap:0; padding:30px 30px 150px;}
    .hp_header #nav ul li { position: relative; margin: auto; width:90%; border-bottom: 1px solid rgba(255,255,255,0.30);}    
    .hp_header #nav ul li p a {
        padding:20px 25px;
        text-align: center;
        color: #fff;
    }    
    .hp_header #nav ul li.contact { 
        margin:50px auto 0; padding:20px;
        width: 250px;
        background: #fff;
        border: none;
        border-radius: 10px;
    }
}



/* =========================================================================================
Footer
=========================================================================================*/
.ec-layoutRole__footer { border-top:1px solid #ddd;}
.hp_footer {
    font-family: "Zen Maru Gothic", sans-serif; background:#fff;
    display: flex; flex-direction: column; gap:40px;
    padding:65px 0;
    width:100%;
    font-size: 16px;
}

.hp_footer div,
.hp_footer p,
.hp_footer ul,
.hp_footer li { margin:0; padding:0; list-style:none;}

.hp_footer .logo {
    margin: auto;
    width:70%; max-width: 500px; height:auto; aspect-ratio: 793 / 145;
    text-indent: -9999px;
    background: url("/store/html/user_data/custom/logo.webp") no-repeat;
    background-size: 100% auto;
}
.hp_footer .f_nav {
    display: flex; flex-wrap: wrap; justify-content: center; gap:20px;
}
.hp_footer .f_nav a {
    color: #222;
}
.hp_footer .add {
    text-align: center;
    font-size: 112.5%;
    line-height: 150%;
}
.hp_footer .add span { display: inline-block; margin:0 10px;}
.hp_copy {
    padding: 10px;
    font-size:75%;
    color: #fff;
    text-align: center;
    background:#414A60;
}
@media only screen and (min-width:768px){
    .hp_footer .f_nav a:hover { color:#476BC4; text-decoration: none;}
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    .hp_footer .f_nav { display: none;}
}



/*=========================================================================================
OTHER
=========================================================================================*/
.ec-layoutRole__contents { background: #fff;}
.entry-header {
    padding: 50px 0;
    font-size:225%;
    text-align: center;
    color: #fff;
    background:url("/store/html/user_data/custom/tit_bg.webp") no-repeat center center;
    background-size: cover;
}
.ec-pageHeader { color:#476BC4;}
.ec-layoutRole__main { padding:70px 0;}
@media only screen and (max-width:768px){
    .entry-header { padding: 40px 0; font-size: 187%;}
    .ec-layoutRole__main { padding:40px 0;}
}
@media only screen and (max-width:468px){
    .entry-header { padding: 40px 0 ;}
}


h2.ec-headingTitle { font-weight: bold;}
.ec-productRole { padding-top:100px; padding-bottom: 100px; }
.ec-productRole .ec-productRole__tags,
.ec-productRole .ec-productRole__price { border: none;}
.ec-sliderItemRole .slideThumb img { width:100%;}
@media only screen and (max-width:468px){
    .ec-productRole { padding-top:40px; padding-bottom: 40px; }
}

/*=========================================================================================
 CUSTOM TOP
=========================================================================================*/
#original {
    display: flex; flex-direction: column; gap:40px;
    font-size:16px;
}
#original .sb_content { display: flex; flex-direction: column; gap:40px;}
#original ul,
#original li,
#original dl,
#original dt,
#original dd { margin:0; padding:0; list-style:none;}
#original img { width:100%; height: auto;}
#original .pc { display:block;}
#original .pctb { display:block;}
#original .tbsp { display:none;}
#original .sp { display:none;}
@media only screen and (max-width:768px){
    #original .pc { display:none;}
    #original .pctb { display:block;}
    #original .tbsp { display:block;}
    #original .sp { display:none;}
}
@media only screen and (max-width:468px){
    #original .pc { display:none;}
    #original .pctb { display:none;}
    #original .tbsp { display:block;}
    #original .sp { display:block;}
}


#original h3 { position: relative; font-weight: 700; letter-spacing: 2px;}
#original .mid,
#original .mid2 { font-size: 200%;}
#original .mid { text-align: center;}
#original .mid b { position: relative; font-weight: 700; letter-spacing: 2px;}
#original .mid b span { position: relative;}
#original .mid b::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0; bottom:0;
    margin: auto;
    width: 100%; height: 20px;
    background:rgba(71,107,196,0.50);
    border-radius: 40px;
}
#original .mid.mid_b b::before { background:rgba(71,107,196,0.50);}
#original .mid.mid_g b::before { background:rgba(87,167,64,0.50);}



#original .one_plan {
    margin: auto;
    max-width: 800px;
    padding: 20px 40px;
    background: #fff;
    border-radius: 100px;
}
@media only screen and (max-width:468px){
    #original .one_plan { border-radius: 10px;}
}



#original .plan { display: flex; flex-direction: column; gap:40px;}
#original .plan h3 { margin: 0; font-size:187.5%; color:#476BC4; text-align: center; text-decoration: underline;}
#original .plan .come { text-align: center;}
#original .plan .plan_list { 
    display: flex; flex-wrap: wrap;
    padding: 20px 0;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
}
#original .plan .plan_list .box { padding:0 10px; width:25%;}
#original .plan .plan_list .box + .box { border-left: 1px solid #ddd;}
#original .plan .plan_list .box p { margin: auto; padding: 20px 0; width: 100%; max-width: 235px;}
#original .plan .plan_list .box ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;}
#original .plan .plan_list .box ul li { width:calc(50% - 2.5px); min-width: 130px;}
#original .plan .plan_list .box ul li a {
    display: block;
    padding:5px 10px;
    color: #fff;
    font-size: 87.5%;
    font-weight:700;
    text-align: center;
    text-decoration: none;
    background-size: 20px auto !important;
    border-radius: 100px;
}
#original .plan .plan_list .box ul li:nth-child(1) a {
    color: #476BC4;
    background:#ECF0F9 url("https://ohaka-mamoru.com/ossk/wp-content/themes/images/common/arrow_b1.svg") no-repeat 93% center;
}
#original .plan .plan_list .box ul li:nth-child(2) a {
    color: #fff;
    background:url("images/common/arrow_w1.svg") no-repeat 93% center;
}
#original .plan .plan_list .box:nth-child(1) ul li:nth-child(2) a { background-color:#D8452E;}
#original .plan .plan_list .box:nth-child(2) ul li:nth-child(2) a { background-color:#5F7DC6;}
#original .plan .plan_list .box:nth-child(3) ul li:nth-child(2) a { background-color:#49B3A5;}
#original .plan .plan_list .box:nth-child(4) ul li:nth-child(2) a { background-color:#E1B720;}
@media only screen and (min-width:768px){
    #original .plan .plan_list .box ul li a:hover {
        opacity: 0.8;
        background-position: 92% center;
    }
}
@media only screen and (max-width:968px){
    #original .plan .plan_list .box { padding:20px; width:50%;}
    #original .plan h3 { font-size:162.5%;}
    #original .plan .plan_list .box:nth-child(1),
    #original .plan .plan_list .box:nth-child(2) { border-bottom: 1px solid #ddd;}
}
@media only screen and (max-width:768px){
    #original .plan h3 { font-size:162.5%;}
}
@media only screen and (max-width:468px){
    #original .plan h3 { font-size:137.5%;}
    #original .plan .come { text-align:left;}
    #original .plan .plan_list  { flex-direction: column; padding: 0;}
    #original .plan .plan_list .box { padding: 20px 10px; width:100%;}
    #original .plan .plan_list .box + .box { border-left: none; border-top: 1px solid #ddd;}
    #original .plan .plan_list .box p {max-width: 250px;}
}



#original .option ul.option_list { position: relative; display:flex; flex-wrap: wrap; gap:20px;}

#original .option ul.option_list li {
    padding: 20px;
    width:calc(50% - 10px);
    text-align: center;
    background: #F2ECE2;
    border-radius: 30px;
}
#original .option ul.option_list li img {
    width: 100%; max-width: 360px;
    height: auto;
    aspect-ratio: 734 / 170;
}
#original .option .come { text-align: center;}
#original .option .btn_box { display:flex; gap:10px 40px; margin: auto; width: 100%; max-width: 750px;}
#original .option .btn_box .b_more { width: 50%;}
@media only screen and (max-width:768px){
    #original .option ul.option_list::before { width: 150px; top:-175px;}
    #original .option .btn_box { flex-direction: column;}
    #original .option .btn_box .b_more { width: 100%;}
}
@media only screen and (max-width:468px){
    #original .option ul.option_list::before { width: 100px; top:-200px; left: 0; right: 0; margin: auto;}
    #original .option ul.option_list { flex-direction: column; gap:10px;}
    #original .option ul.option_list li { padding: 10px; width: 100%; border-radius: 10px;}
    #original .option .come { text-align:left;}
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
}


#original .option .b_more { margin: auto; width: 100%; max-width: 340px;}
#original .option .b_more a {
    display: block;
    padding: 20px;
    color: #fff;
    font-size: 162.5%;
    font-weight:700;
    text-align: center;
    text-decoration: none;
    background:#476BC4 url("images/common/arrow_w1.svg") no-repeat 90% center;
    background-size: 20px auto;
    border-radius: 100px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20);
    transform: .3s;
}
@media only screen and (min-width:768px){
    #original .option .b_more a:hover {
        opacity: 0.8;
        background-position: 92% center;
    }
}
@media only screen and (max-width:768px){
    #original .option .b_more a { padding: 17px; font-size: 137%;}
}
@media only screen and (max-width:468px){
    #original .option .b_more a { padding: 15px; font-size: 125%;}
}




.ec-borderedDefs dt {padding-top:0;}
.ec-borderedDefs dt,
.ec-borderedDefs dd { line-height:130%;}




.other_page .ec-rectHeading h2 { color: #fff; background:#476BC4;}
.other_page .tokutei { margin-top: 10px; padding: 20px; height: 500px; overflow: auto; background: #fff;}
.other_page .tokutei .ec-rectHeading h2 { color: #fff; background:#525263;}
.other_page .ec-input .att  { padding:10px; color: #FF0004;}
.other_page .ec-orderAccount__account,
.other_page .ec-orderPayment .ec-blockRadio,
.other_page .ec-orderConfirm .ec-input,
.other_page .ec-orderDelivery__address,
.other_page .ec-orderDelivery__actions { padding:10px;}
.other_page .ec-totalBox { background: #fff;}


#howto_payment { display: flex; flex-direction: column; gap:40px; font-size: 16px; margin: auto; width: 90%;}
#howto_payment h2 { margin-bottom: 20px; padding-bottom: 10px; font-size: 187.5%; color: #476BC4; border-bottom: 2px solid #476BC4;}
#howto_payment h3 { font-size: 150%; color: rgba(87, 167, 64, 0.80);}
#howto_payment h4 { font-size: 125%; color: #222;}


.item_info { display: flex; flex-direction: column; gap:100px; padding: 0 20px 100px; font-size:16px;}
.item_info img { width:100%; height:auto;}
.item_info h5 { font-weight:700 !important;}
.item_info ul,
.item_info li,
.item_info dl,
.item_info dt,
.item_info dd { margin:0; padding:0;}

.kitamura_support { display: flex; flex-direction: column; gap:40px;}
.kitamura_support h5 { font-size: 187.5%; color:#222; text-align: center;}
.kitamura_support .come { text-align: center; margin-bottom:20px;}
.kitamura_support .support_houchi { display: flex; gap:20px;}
.kitamura_support .support_houchi .box {
    position: relative;
    padding: 40px 30px 30px;
    background: #fff;
    border-radius: 30px;
}
.kitamura_support .support_houchi h4 { position: absolute; top: -15px; left: 0; width: 100%; text-align: center; color:#476BC4;}
.kitamura_support .support_houchi ul { display: flex; flex-direction: column; gap:20px;}
.kitamura_support .support_houchi ul li { display: flex; flex-wrap: wrap; gap:20px;}
.kitamura_support .support_houchi ul li .pic { width: 120px;}
.kitamura_support .support_houchi ul li .come { width:calc(100% - 120px - 20px); text-align: left;}
.kitamura_support .support_houchi ul li .come b { display: block;}
@media only screen and (max-width:768px){
    .kitamura_support .support_houchi { flex-direction: column; gap:40px;}
    .kitamura_support .support_houchi .box { padding: 40px 20px 20px; border-radius: 20px;}
    .kitamura_support .support_houchi h4 { top:-15px;}
    .kitamura_support .support_houchi ul li { gap:10px;}
    .kitamura_support .support_houchi ul li .pic { width: 80px;}
    .kitamura_support .support_houchi ul li .come { width:calc(100% - 80px - 10px); line-height: 130%;}
}
@media only screen and (max-width:468px){
    .kitamura_support { gap:20px;}
    .kitamura_support h5 { font-size:137.5%;}
    .kitamura_support .come { text-align: left;}
    .kitamura_support .support_houchi ul li .pic { width: 50px;}
    .kitamura_support .support_houchi ul li .come { width:calc(100% - 50px - 10px);}
}

.kitamura_flow { display: flex; flex-direction: column; gap:40px;}
.kitamura_flow h5 { font-size: 187.5%; color:#222; text-align: center;}
.kitamura_flow .flow_list { display: flex; flex-wrap: wrap; justify-content: center; gap:40px 0; margin: auto; width: 100%; max-width: 900px;}
.kitamura_flow .flow_list dl { width: 20%; min-width: 140px;}
.kitamura_flow .flow_list dl dt { margin: 0 auto 10px; max-width: 100px; text-align: center;}
.kitamura_flow .flow_list dl dd { text-align: center; line-height: 150%;}
.kitamura_flow .flow_list dl dd b { display: block;}
@media only screen and (max-width:468px){
    .kitamura_flow { gap:20px;}
    .kitamura_flow h5 { font-size:137.5%;}
    .kitamura_flow .flow_list { flex-direction: column; gap:10px 0;}
    .kitamura_flow .flow_list dl { display: flex; align-items: center; gap:10px; width: 100%; min-width: inherit;}
    .kitamura_flow .flow_list dl dt { width: 100px;}
    .kitamura_flow .flow_list dl dd { width: calc(100% - 110px); text-align: left;}
}

.kitamura_attention { display: flex; flex-direction: column; gap:40px; font-size:16px;}
.kitamura_attention h5 { font-size: 187.5%; color:#D8452E; text-align: center; text-decoration: underline; font-weight:700 !important;}
.kitamura_attention .attention_list { display: flex; flex-direction: column; gap:5px; padding: 0 20px;}
.kitamura_attention dl { display: flex;  flex-wrap: wrap; margin:0; padding: 20px; background: #FFFFFF;}
.kitamura_attention dl dt { width: 120px; font-weight: bold; line-height: 130%;}
.kitamura_attention dl dd { width: calc(100% - 120px);}
.kitamura_attention .mid { color: #476BC4; text-decoration: underline;}
.kitamura_attention .red { color: #FF0000;}
@media only screen and (max-width:468px){
    .kitamura_attention { gap:40px;}
    .kitamura_attention h5 { font-size:137.5%;}
    .kitamura_attention dl { flex-direction: column;}
    .kitamura_attention dl dt,
    .kitamura_attention dl dd { width:100%;}
    .kitamura_attention dl dt { border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px;}
    .kitamura_attention dl dt br { display: none;}
}