﻿/** font **/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Plus+Jakarta+Sans:wght@500;700&display=swap');

:root{
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en: 'Plus Jakarta Sans', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
body, .font_sans-serif{
    font-family: var(--font-jp);
}
.font_en, a[href^="tel:"]{
    font-family: var(--font-en);
}

/** color **/

:root{
    --color1: #0B40AA;
    --color2: #0CCEE2;
    --color3: #22D36D;
    --color4: #E0E1E2;
    --color5: #F2F3F4;
    --black: #043077
}

/** other **/

#fakeloader .fl{
    max-width: 300px;
}

.square_img, .normal_img img, .rectangle_img{
    border-radius: 10px;
}

.shadow, .shadow-l, .shadow-b{
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.header-in{
    max-width: 1280px;
}

.pc_nav li{
    padding: 0;
}
.pc_nav li a{
    padding: 38px 20px 0;
    background-size: 30px;
    background-position: top center;
    background-repeat: no-repeat;
    display: block;
}
.pc_nav li:nth-of-type(1) a{
    background-image: url('./Dup/img/icon1.png');
}
.pc_nav li:nth-of-type(2) a{
    background-image: url('./Dup/img/icon2.png');
}
.pc_nav li:nth-of-type(3) a{
    background-image: url('./Dup/img/icon3.png');
}
.pc_nav li:nth-of-type(4) a{
    background-image: url('./Dup/img/icon4.png');
}
.pc_nav li:nth-of-type(5) a{
    background-image: url('./Dup/img/icon5.png');
}
.pc_nav li a span.font_16{
    color: var(--black);
    font-size: 14px;
}
.pc_nav li a span.font_15{
    font-size: 10px;
    letter-spacing: 3px;
    opacity: 0.5;
    font-family: var(--font-en);
}

.logo1, #sp_nav .sp_nav_inner .menu__header .logo3 img{
    max-width: 200px;
}

#price_cms{
    margin-top: -50px;
    position: relative;
    z-index: 1;
}

#main_img{
    background-color: transparent;
    padding-top: 0;
    position: relative;
    z-index: 1;
}

#con1 .topTxt1 .arrow{
    margin-left: -16px;
}

#con1{
    background-image: url('./Dup/img/bg_img3.jpg');
    background-size: cover;
    background-position: center;
}
#con1 h2{
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 30px;
    line-height: 1.5;
}

#con2{
    background-image: url(./Dup/img/bg_img6.png);
    background-repeat: no-repeat;
    background-size: 500px;
    background-position: left 5% bottom 0;
}
#con2 p.font_22{
    color: var(--color1);
    font-weight: bold;
    font-size: 30px;
    line-height: 1.5;
    padding-bottom: 20px;
    margin-bottom: 20px;
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-size: 50px 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

#con3{
    padding-top: 50px;
    background-image: url('./Dup/img/bg_img4.png');
    background-size: 20px;
}
#con3 .box{
    position: relative;
    margin-top: 60px;
}
#con3 .box::before{
    position: absolute;
    width: 80px;
    height: 80px;
    line-height: 80px;
    left: 0;
    right: 0;
    top: -60px;
    border: solid 1px;
    color: var(--color1);
    border-radius: 50%;
    text-align: center;
    z-index: 1;
    margin: auto;
    font-size: 18px;
    font-family: var(--font-en);
}
#con3 .box:nth-of-type(1)::before{
    content: "01";
}
#con3 .box:nth-of-type(2)::before{
    content: "02";
}
#con3 .box:nth-of-type(3)::before{
    content: "03";
}
#con3 .box .img{
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
#con3 .box .icon{
    display: none;
}
#con3 .sub_title{
    font-weight: bold;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 22px;
}
#con3 .sub_title::before{
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    background-color: currentColor;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
}
#con3 .txt{
    margin-top: 0;
}

.c-btn{
    border: none;
    background-image: linear-gradient(to right, var(--color1), #0C7FC6);
    color: #fff;
}
.c-btn i{
    color: #fff;
}

#topCms .topCms{
    padding-top: 0;
    padding-bottom: 100px;
    border-bottom: none;
    position: relative;
}
#topCms .topCms::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 50px;
    top: -49px;
    left: 0;
    background-image: url('./Dup/img/bg_img.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    pointer-events: none;
}
#topCms .topCms:last-of-type{
    background-color: var(--color5);
}
#topCms .topCms:last-of-type::before{
    background-image: url('./Dup/img/bg_img2.png');
}
#topCms .topCms:nth-of-type(1) .cmstitle .en{
    background-image: url('./Dup/img/icon1.png');
}
#topCms .topCms:nth-of-type(2) .cmstitle .en{
    background-image: url('./Dup/img/icon2.png');
}
#topCms .topCms:nth-of-type(3) .cmstitle .en{
    background-image: url('./Dup/img/icon3.png');
}
#topCms .topCms:nth-of-type(4) .cmstitle .en{
    background-image: url('./Dup/img/icon5.png');
}
#topCms .cmstitle .en{
    font-size: 30px;
    letter-spacing: 5px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 80px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 60px;
    color: var(--black);
}
#topCms .cmstitle p{
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 8px;
}
#topCms .cmstitle p span{
    display: none;
}

.cms_3-f .cate:not(:last-of-type){
    background-image: linear-gradient(to right, var(--color4), var(--color4));
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1px calc(100% - 60px);
}
.cms_3-f .cate a{
    transition: transform 0.5s;
}
.cms_3-f .cate a:hover{
    transform: translateY(-10px);
}

.all_contents{
    background-color: #fff;
}
.all_contents > div{
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}

.pagetitle{
    background-color: transparent;
    background-image: linear-gradient(to right, var(--color1), #0C7FC6), linear-gradient(to bottom, var(--color4), var(--color4));
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100px 5px, 100% 1px;
}
.pagetitle_img{
    display: none;
}
.pagetitle h2{
    font-size: 40px;
    letter-spacing: 5px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.5;
}
.pagetitle p{
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 8px;
}
.pagetitle p span{
    display: none;
}

.pager li{
    margin: 0 5px;
}
.pager li a{
    font-size: 18px;
    color: var(--color1);
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
}
.pager li.prev a, .pager li.next a{
    width: 80px;
}

.cate_list li a:hover{
    border-color: var(--color3);
}

.date_box, .date, .pager{
    font-family: var(--font-en);
}

.f_contact_box{
    background-image: url('./Dup/img/bg_img5.png');
    background-size: 100px;
    background-position: right 50px bottom 0;
    background-repeat: no-repeat;
}
.f_contact_box h4{
    line-height: 1.5;
    font-size: 30px;
    letter-spacing: 5px;
    font-weight: bold;
}
.f_contact_box p.font_16{
    font-family: var(--font-en);
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 8px;
    margin-bottom: 30px;
}
.f_contact_box .tel::after{
    content: "電話受付時間　9:00 - 21:00";
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
}
.f_contact_box .f_contact_btn{
    display: none;
}

#page10 .sitemap li a:hover{
    background-color: var(--color2);
}

.footer{
    background-color: var(--black);
}

.pagetop{
    transform: translateY(-100px)!important;
    z-index: 1;
}

.foot_banner{
    right: 20px;
    bottom: 20px;
    z-index: 1;
}


/** tablet 780 **/
@media screen and (max-width: 768px){
.header .logo1{
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 100px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
#price_cms {
    margin-top: -30px;
}
#con2{
    background-image: url(./Dup/img/bg_img6_sp.png);
    background-size: 40%;
    background-position: top 50px right 0
}
#con2 p.font_22{
    text-align: center;
    background-position: center bottom;
}
.cms_3-f .cate a:hover{
    transform: none;
}
.pagetitle h2{
    font-size: 30px;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
.header .logo1 {
    padding: 10px 20px;
    max-width: 150px;
}
#con1 h2{
    font-size: 22px;
}
#con2{
    background-size: 60%;
}
#con2 p.font_22{
    font-size: 22px;
}
#topCms .topCms{
    padding-top: 30px;
}
#topCms .topCms::before {
    height: 25px;
    top: -24px;
}
#topCms .cmstitle .en, .pagetitle h2, .f_contact_box h4{
    font-size: 28px;
    letter-spacing: 3px;
}
.cms_3-f .cate:not(:last-of-type){
    background-position: bottom center;
    background-size: calc(100% - 40px) 1px;
}
.f_contact_box{
    padding-bottom: 120px;
    background-position: bottom center;
}
footer .copy{
    padding-bottom: 80px;
}
.pagetop{
    transform: translateY(-20px)!important;
}
.foot_banner{
    width: calc(100% - 40px);
    bottom: 0;
}
.foot_banner a{
    border-radius: 10px 10px 0 0;
}
}