@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500&display=swap');

:root{--font_zenkaku: 'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}
:root{--font_zenmin: 'Zen Old Mincho', "YuMincho", "MS PMincho","Hiragino Mincho Pro", "Sawarabi Mincho", "serif" !important;}

h1, h2, h3, h4, h5, h6, .l-menu ul li a, .f_sitemap_inner li a, .copy, .topTxt1, .f_contact_btn a, .jp, .more a, #con2 .font_22, .f_contact_box p, .tel, #page10 .sitemap li a, .contact_tel a, .contact_mail a,header a span.font_16{font-family:var(--font_zenmin) }
body, .font_sans-serif,.font_serif{font-family:var(--font_zenkaku) }

.font_14 {font-size: 16px;}
.font_15 {font-size: 17px;}
.font_16 {font-size: 19px;}


/*毎回いる*/
.f_contact_box h4 {
    font-size: 33px;
    padding-bottom: 10px;
}
.menu_btn.stick_trans span:last-child { margin-top: -3px;}

/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#fdbd92;
    --color2:#8D7E7E;
    --color3:#fbb89f;
    --color4:#fffef8;
    --color5:#FBEDEA;    
    --white:#FFFFFF;
    --black:#5E5454;
    --gray:#758694;
    --color6:#b2c208;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color1);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color2);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color6);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color1);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color3);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color3);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color6);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color1);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color6);}

.linkStyle{color: var(--color3);
          border-bottom:solid 1px;
}
/* color ---------------------------------------------------------------------------------------------*/
/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3,#contents, .con2_outer, .con3_outer,.img5, .img6, .img7,div#left,div#right,div#intro_wrap,#contents2_wrap,#main_img,#con3 .title .en{position: relative;}
/*装飾に便利なposi_rel*/
/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,#contents::before,.img5::before, .img6::before, .img7::before,div#left::before,div#right::before,div#intro_wrap::before,div#intro_wrap::after,#contents2_wrap::before,#con3 .title .en::before{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}
/*装飾に便利な疑似クラス設定*/


.BA_type1 .box_item, .BA_type1 .box_img1, .BA_type1 .box_img2 {position: relative;}
.BA_type1 .box_item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50.3%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0 17px 40px;
    border-color: transparent transparent transparent #ff9e03;
}
.BA_type1 .box_img1 {margin-right: 40px;}
.BA_type1 .box_img2 {margin-left: 40px;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {
    position: absolute;
    height: 33px;
    width: 87px;
    background-color: #fff;
    color: #434343;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.BA_type1 .box_img1::after {content: "before";}
.BA_type1 .box_img2::after {content: "after";}

@media screen and (max-width: 768px){
.BA_type1 .box_img1 {margin-right: 30px;}
}

@media screen and (max-width: 667px){
.BA_type1 .box_img1 {margin-right: 5%;margin-bottom: 50px;}
.BA_type1 .box_img2 {margin-left: 5%;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {height: 30px;font-size: 15px;}
.BA_type1 .box_item::after {transform: translate(-50%,-60%) rotate( 90deg);border-width: 20px 0 20px 23px;}
}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
div#video, .video {
    height: calc(100vh - 100px);
    width: 100% !important;
    object-fit: cover;}

.video {padding:50px;}
.video {padding: 65px 40px 40px;}

div#main_img {background: transparent;}

.catch {
    position: absolute;
    top: 47%;
    left: 20%;
    width: 26vw;
    transform: translate(-50%, -50%);}
    
.fadein{
    transform: translate(-50%, -50%);
	transition: transform 2s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
	filter: blur(3px);}

.fadein.start{transform: translate(-50%, -48%);;opacity: 1;	filter: blur(0px);}
section#con1 {background: var(--white);}

.topTxt1{display:none;}
section#con1 {background: transparent;}
#main_img::after {
    background: var(--color5);
    background: rgb(255,253,247);
    background: linear-gradient(90deg, rgba(255,253,247,0.5) 0%, rgba(251,237,234,1) 100%);
    width: 80%;
    height: 60%;
    right: 0;
    top: 50%;
    z-index: -1;}

.con1_inner h2, .con1_inner p {text-align: left;}
.con1_inner {padding-top: 70px;}

.con1_inner h2 {
    color: var(--color2);
    font-size: 30px;
    letter-spacing: 5px;
    width: calc(110% - 500px);}

span.intro_img img {
    max-width: 500px;
    max-height: 300px;
    height: 50%;
    width: 50%;
    object-fit: cover;
    position: absolute;
    right: 100px;}
    
    
.fadein02{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
	filter: blur(3px);	}
	
.fadein02.start{transform: translateY(0);opacity: 1;filter: blur(0px);}    

.con1_squ{display:none;}

section#con2 .font_22 {
    margin-bottom: 5px;
    color: var(--color2);
    font-size: 25px;}
    
section#con2 {background: var(--color4);}
span.sl,#con3 .box .icon{display:none;}

#con3 .title .en{color:var(--color2);}

#con3 .title .en::before {
    width: 61px;
    height: 2px;
    background: var(--color3);
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, -50%);}
    
h4.con3_sub {
    font-size: 25px;
    color: var(--color3);
    margin-top: 30px;
    margin-bottom: -10px;}
#con3 .box {
    position: relative;
    background: rgb(255 255 255 / 80%);
    padding: 40px;}
section#con3 .box {width: 32% !important;}

section#con3 .con_txt p {
    font-size: 17px !important;
    padding: 0;}
section#con3 {
    background: rgb(235,242,247);
    background: rgb(235,242,247);
    background: linear-gradient(45deg, rgba(235,242,247,1) -15%, rgba(249,249,242,1) 6%, rgba(250,244,239,1) 15%, rgba(251,237,234,1) 100%);
}
/*-------------------------------------------------------
				read more
-------------------------------------------------------*/
#con3 .txt_more {
    cursor: pointer;
    background-color: var(--color5);
    color:  var(--black);
    margin: 20px 20px 0;
}
#con3 .txt_more:hover{
    background-color: var(--color3);
    color:  var(--white);
}
#con3 .txt_more .arrow{
    height: 0.8em;
    width: 1em;
}
#con3 .txt_more .arrow::before, #con3 .txt_more .arrow::after{
    position: absolute;
    content: "";
    width: 10px;
    height: 1px;
    background-color: currentColor;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: 0.3s;
    transition-property: width, right, left, transform;
}
#con3 .txt_more .arrow::after{
    transform: rotate(90deg);
}
#con3 .txt_more.trans .arrow::before{
    transform: rotate(-45deg);
    width: 6px;
    right: 4px;
}
#con3 .txt_more.trans .arrow::after{
    transform: rotate(45deg);
    width: 6px;
    left: 4px;
}

.txt_more span.circle, .arrow {
     background:transparent !important; 
}
#con3 .box_wrap {align-items: stretch;}

/*-------------------------------------------------------
				read more
-------------------------------------------------------*/


.cmstitle .en {
    font-size: 30px;
    line-height: 1.0;
    color: var(--color6);}

.cmstitle span {color: var(--color1);}    
.cmstitle .jp {font-size: 17px;}

.cmstitle .jp span {
    font-size: 12px;
    padding-top: 3px;}
section.topCms {border-color: var(--color5);}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
    
/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.logo1 {
    max-width: 320px;
    padding-left: 0px;
    padding-right: 20px;}
#sp_nav .sp_nav_inner .menu__header .logo3 img {max-width: 400px;}
div#sp_nav {background: var(--color4);}

#fakeloader:before {background-color: #fffdfd;}
ul.f_sitemap_inner li i, ul.f_sitemap_inner li a {color: var(--black);}
.footer {background: var(--color4);}
.footer p {
    max-width: 900px;
    text-align: center;
    color: var(--color2);}
.logo2 a {max-width: 450px;}
ul.f_sitemap_inner {max-width: 1280px;}

.f_contact_box p.font_16{color:var(--color1);}

.fl {max-width: 400px !important;}
.fa-envelope:before {content: "\f075" !important;}
.l-menu ul li a.font_16 {
    letter-spacing: 1px;
    font-size: 18px;}
header a span.font_16{color:var(--color3);}
/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.pagetitle_img {
    opacity: 0.1;
    mix-blend-mode: normal;}
.pagetitle h2 {color: var(--color3);}
.pagetitle span{color: var(--color3);}

main.all_contents {
    background: rgb(235,242,247);
    background: rgb(235,242,247);
    background: linear-gradient(182deg, rgba(235,242,247,1) -30%, rgba(249,249,242,1) -20%, rgba(250,244,239,1) -1%, rgba(251,237,234,1) 140%);}

#cms_2-f .box_title1::after {top: 21px;}
#page10 .sitemap li a:hover {background: var(--color3);}
/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*タブレット*/
@media screen and (max-width: 768px){
    .font_14 {font-size: 15px;}
    .font_15 {font-size: 16px;}
    .font_16 {font-size: 18px;} 
    
    div#video, .video {
        height: calc(70vh - 100px);
        width: 100% !important;
        object-fit: cover;}
    .video {padding: 20px;}
    span.intro_img img {
        max-width: 250px;
        max-height: 150px;
        height: 50%;
        width: 50%;
        object-fit: cover;
        position: absolute;
        right: 50px;}
    .catch {
        position: absolute;
        top: 49%;
        left: 26%;
        width: 38vw;
        filter: drop-shadow(1px 1px 2px var(--white)) !important;}
    .con1_inner {padding-top: 20px;}
    .con1_inner h2 {
        color: var(--color2);
        font-size: 21px;
        letter-spacing: 2px;
        width: calc(100% - 260px);}
    .logo1 {
        max-width: 250px;
        padding-left: 20px;
        padding-right: 20px;}
    .l-menu ul li a {
        font-size: 20px;
        letter-spacing: 1px;}
    .l-menu ul li a.font_16 {
        letter-spacing: 1px;
        font-size: 16px;}
    section#con2 .width_40per {margin-bottom: 30px;}
    #con3 .title .en {
        color: var(--color2);
        margin-bottom: 60px;}
    #con3 .box {padding: 15px;}
    section#con3 p {
        letter-spacing: 1px;
        line-height: 1.5;
        font-size: 15px;}
    h4.con3_sub {
        font-size: 20px;
        color: var(--color3);
        margin-top: 20px;
        margin-bottom: -20px;}
    .f_sitemap_inner li {width: 35%;}   
    .cate_list li a {
        display: block;
        padding: 10px;
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;}    
    #cms_2-f .box_title1 {padding-left:0;letter-spacing: 0.8px;}
    #cms_2-f .box_title1::after{display:none;}
    #cms_2-f .box_item {padding: 10px;}
    #cms_2-f .box_item.pd_l-r5per{padding-left:10px;padding-right:20px;}
    section#cms_3-b .cate_box {
        padding-left: 20px;
        padding-right: 20px;}
}


/*スマホ*/
@media screen and (max-width: 667px){

.logo1 {
    max-width: 200px;
    padding-left: 20px;
    padding-right: 20px;}    
.logo2 a {max-width: 300px;}
#sp_nav .sp_nav_inner .menu__header .logo3 img {max-width: 200px;}
#sp_nav .sp_nav_inner {padding: 20px 0px 20px 0px;}
.pagetitle h2 {font-size: 26px;}
.all_contents .content {padding-top: 7%;}
#cms_2-f .box_item {padding: 0px !important;}
section#cms_3-b .cate_box {
    padding-left: 10px;
    padding-right: 10px;}
.video {padding: 15px;}
div#video, .video {height: calc(60vh - 100px);}
span.intro_img img {
    max-width: 200px;
    max-height: 60px;
    height: 50%;
    width: 50%;
    object-fit: cover;
    position: absolute;
    right: 7px;
    top: calc(60vh - 7px);}
.catch {
    position: absolute;
    top: 56%;
    left: 35%;
    width: 55vw;
    filter: drop-shadow(1px 1px 1px var(--white)) !important;}
.con1_inner h2 {
    color: var(--color2);
    font-size: 17px;
    letter-spacing: 2px;
    width: 100%;}
section#con2 .font_22 {
    font-size: 22px;
    text-align: center;}
.font_15 {font-size: 15px;}
section#con3 .box {width: 100% !important;}
section#con3 .box {
    width: 100% !important;
    margin-bottom: 20px;}
section#con3 .con_txt p {
    font-size: 15px !important;
    padding: 0;}
.font_14_sp {font-size: 15px;}
section#con3 p.txt {margin-bottom: 5px;}
.cmstitle .en {
    font-size: 22px;
    line-height: 1.0;
    color: var(--color3);}
.l-menu ul li a {
    font-size: 19px;}
}