@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@350&display=swap');

body, .font_sans-serif, .font_serif{
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    font-weight: 350;
}

a[href^="tel:"], #header, .font_un, .more_btn, .top_cms_title h2, .date, #sf h3, .sf_copy, #page_title h2, .pager, .cate_label, #page10, #footer_nav, #page_top, .s_footer_copy, .qa_type1 .cate_box .open_bt .box_title1::before{
    font-family: 'Josefin Sans', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

.font_bold{
    font-weight: 350;
}

/*** animation ***/

@keyframes anime1 {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -1600px;
    }
}
@keyframes anime2 {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -800px;
    }
}
@keyframes anime3 {
    0% {
        background-position-x: 0, 0;
    }
    100% {
        background-position-x: -1600px, -3200px;
    }
}
@keyframes anime4 {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -800px, -1600px;
    }
}

/*** other ***/

:root{
    --color1: #778899;
    --color2: #f5f6f7;
    --color4: #e1e3e5;
    --color_nomal: #607382
}

.normal_img img, .rectangle_img, .square_img{
    border-radius: 20px 0 20px 0;
}

.pp-section{
    box-shadow: 0 10px 30px rgba(96, 115, 130, 0.1);
}
.scrollpage_box{
    padding-left: 0;
    padding-right: 0;
}

.overlay{
    right: -50px;
    opacity: 0;
    transition-duration: 1s;
    transition-property: right, opacity, visibility;
    transition-timing-function: cubic-bezier(0,.76,.39,.99);
}

#main_img .swiper-wrapper::before{
    background-image: url('./Dup/img/bg_img3.png')!important;
    background-size: 1600px;
    background-repeat: repeat-x;
    background-position-x: 0;
    background-position-y: 50%;
    background-color: var(--color1)!important;
    opacity: 0.4;
    animation: anime1 5s linear infinite;
}
#main_img .main_title{
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(5px);
    opacity: 0;
    transition-property: transform, filter, opacity;
    transition-duration: 1s;
    z-index: 1;
}
#main_img .main_title.active{
    transform: translate(-50%, -50%);
    filter: none;
    opacity: 1;
}

#s_content1{
    background-image: url('./Dup/img/bg_img5.png'), url('./Dup/img/bg_img4.png');
    background-size: 1600px;
    background-repeat: repeat-x;
    background-position-x: 0;
    background-position-y: 50%;
    animation: anime3 10s linear infinite;
}
#s_content1 .title1{
    left: 20px;
    top: 20px;
    z-index: 1;
}
#s_content1 .intro_img a::before{
    display: none;
}

#s_content2 .contents_no, #s_content2 .c2_box_bg::before{
    display: none;
}
#s_content2 h3 span{
    border-radius: 2em;
}
#s_content2 h3 span::before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 0;
    right: 0;
    top: -10px;
    border-left: solid 6px transparent;
    border-bottom: solid 10px var(--color1);
    border-right: solid 6px transparent;
    margin: auto;
}

#s_content2 .c2_box{
    min-height: 415px;
}
#s_content2 .c2_box .c2_box_txt{
    padding: 30px 0;
}
#s_content2 .c2_box .c2_box_txt > div{
    position: relative;
    border-radius: 10px;
}
#s_content2 .c2_box:first-of-type .c2_box_txt > div{
    left: -30px;
}
#s_content2 .c2_box:last-of-type .c2_box_txt > div{
    right: -30px;
}

.cms_box .cms_wrap{
    padding-left: 20px;
    padding-right: 20px;
}
.cms_box .cms_box_bg{
    display: none;
}
.cms_box .top_cms_title{
    padding: 70px 0 100px;
    margin-bottom: 50px;
    background-color: var(--color2);
    background-image: url('./Dup/img/bg_img2.png');
    background-position: left 0 bottom -1px;
    background-repeat: no-repeat;
    background-size: 100% 100px;
}
.cms_box .top_cms_title h2{
    font-size: 34px;
}
.cms_box .more_btn{
    margin-top: 50px;
    padding-bottom: 50px;
}

.more_btn a, .more_btn > span{
    padding: 14px 0 10px;
    border: none;
    border-bottom: solid 1px;
    max-width: 200px;
}
.more_btn.more_width a{
    max-width: 300px;
}
.more_btn .more_line{
    transform: translateY(100%);
    transition-timing-function: cubic-bezier(0,.76,.39,.99);
}

#page_title::before{
    background-image: url('./Dup/img/bg_img1.png');
    background-position: left 0 bottom -1px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgba(119,136,153,0.6);
}
#page_title .page_title_inner{
    padding: 0;
    height: 400px;
}
#page_title .title_box{
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 100%!important;
    left: 0;
    background-color: transparent;
    border-top: none;
    padding: 0;
    color: #fff;
}
#page_title .title_box p{
    font-size: 14px;
}
#page_title .title_box h2{
    font-size: 40px;
}

.pager li a:hover, .cate_list li a:hover, .overlay .menu_list > li:not(:nth-of-type(11)) a:hover{
    opacity: 0.6;
}

#cms_2-a .cate_box:nth-of-type(even){
    flex-direction: row-reverse;
}

.qa_type1 .cate_box .arrow {
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: 0px;
	transform: translateY(-50%);
}
.qa_type1 .cate_box .open_bt{
	cursor: pointer;
}
.qa_type1 .cate_box .open_bt .arrow::before, .qa_type1 .cate_box .open_bt .arrow::after {
	position: absolute;
	content: '';
	width: 15px;
	height: 1px;
	background-color: #5c5c5c;
}
.qa_type1 .cate_box .open_bt .arrow::before {
	top: 48%;
	left: 15px;
	transform: rotate(0deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .arrow::after {
	top: 48%;
	left: 15px;
	transform: rotate(90deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .arrow.arrow_be::before {
	transform: rotate(-135deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .arrow.arrow_be::after {
	transform: rotate(135deg);
	transition: all 0.5s;
}
.qa_type1 .cate_box .open_bt .box_title1 {
	cursor: pointer;
	margin-left: 87px;
}
.qa_type1 .cate_box .open_bt .box_title1::before {
    content: "Q.";
    position: absolute;
    left: -32px;
    top: -3px;
    display: inline-block;
    vertical-align: baseline;
    font-size: 22px;
}

#cms_4-a figure, .cms_4-a figure{
    border-radius: 0;
}
#cms_4-a figure img, .cms_4-a figure img{
    filter: saturate(40%);
}
#cms_4-a figure img:hover, .cms_4-a figure img:hover{
    filter: none;
}

.sf_access iframe{
    height: 360px;
}


#footer_nav{
    background-color: transparent;
    border-top: solid 1px var(--color4);
}
#s_footer{
    background-color: var(--color2)
}

.s_footer_copy{
    padding: 20px 0;
}


/** tablet 780 **/
@media screen and (max-width: 768px){
.scrollpage_box{
    padding-top: 0!important;
    padding-bottom: 0!important;
}
#main_img .swiper-wrapper::before{
    background-size: 800px;
    animation: anime2 3s linear infinite;
}
#s_content1{
    padding-top: 50px!important;
    background-size: 800px;
    animation: anime4 6s linear infinite;
    background-position-y: 80vw;
}
#s_content1 .title1 {
    top: 10px;
}
.cms_box .top_cms_title{
    background-size: 100%;
}
#page_title .page_title_inner{
    height: 300px;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#header .h_box .h_box_mail a{
    padding-left: 20px;
    padding-right: 20px;
}
#s_content1{
    background-position-y: 100vw;
}
#s_content1 .title1 {
    left: 10px;
}
#s_content2 .c2_box .c2_box_txt{
    padding: 0 20px;
}
#s_content2 .c2_box .c2_box_txt > div{
    left: 0!important;
    right: 0!important;
    top: -20px;
}
.cms_box .top_cms_title h2{
    font-size: 30px;
}
#page_title::before{
    background-image: url('./Dup/img/bg_img1_sp.png');
}
#page_title .page_title_inner{
    height: 250px;
}
#page_title .title_box h2{
    font-size: 34px;
}
.qa_type1 .cate_box .open_bt .box_title1 {
	margin-left: 73px;
}
.qa_type1 .cate_box .arrow{
    left: -5px;
}
.qa_type1 .cate_box .open_bt .box_title1::before {
    left: -30px;
    top: -4px;
    font-size: 20px;
}
}