@charset "utf-8";
/*■■ 色・文字 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
:root{
    --color1: #F7CC38;
    --color2: #2eaaf7;
    --color3: #ff5037;
    --color4: #e3e3e3;
    --color5: #FFF;
    --black: #222222;
    --base: #FFF;
    --font1: 16px;
    
    --title1: "Zen Kaku Gothic New", sans-serif;
    --bokashi:5px 15px 20px rgba(0,0,0,0.1);
    --bokashi2:5px 5px 10px rgba(0,0,0,0.1);
    --bg1: linear-gradient(140deg, #fff, rgba(255,255,255,0.8));
    --bg2: linear-gradient(45deg, #ffefed, #e7f6ff);
}

/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --fontB1: 22px;
    }
}
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15,
.font_10_tb,.font_11_tb,.font_12_tb,.font_13_tb,.font_14_tb,.font_15_tb,
.font_10_sp,.font_11_sp,.font_12_sp,.font_13_sp,.font_14_sp,.font_15_sp{font-size: var(--font1);}
.font_2up{font-size: max(calc(var(--font1) + 2px), calc(1rem  + 2px));}
.font_4up{font-size: max(calc(var(--font1) + 4px), calc(1rem  + 4px));}
.font_2dw{font-size: max(calc(var(--font1)), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1)), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1)), calc(1rem  - 6px));}


.base_color{background-color: var(--base);} /* ベースカラー　全体の背景色 */

.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.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(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */
.txt_color5, .hvr_txt_color5:hover{color: var(--color5)} 

/* background-color */
.bg_white, .hvr_bg_white:hover{background-color: white} /* 白背景 */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.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)} 
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.border_white, .hvr_border_white:hover{border-color: white}
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.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(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}
.border_color5, .hvr_border_color5:hover{border-color: var(--color5)}

.linehight_13{line-height:1.3;}
.linehight_12{line-height:1.2;}

#con1 .topTxt1,#con3 .con3_title,.cmstitle,.f_contact_box h4{
    font-family: var(--title1);
}

/*■■ テンプレート調整 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.pagetop {z-index: 5;}

/* タブレット */
@media screen and (max-width: 768px){
    .footer_sns .box a{
        padding: 20px 30px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .footer_sns .box a{
        padding: 10px 17px;
    }
}
/* スマホ */
@media screen and (max-width: 360px){
    .footer_contact .tel{
        letter-spacing: 0.03em;
        font-size: 25px;
    }
}
/*■■ top, all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#con1{
    background-color: var(--color4);
    padding: 150px 0 100px;
    
    background-image: url(./Dup/img/bg.jpg);
    background-size: cover;
}
#con1 .con1_inner{
    position: relative;
    background-color: var(--base);
    background: var(--bg1);
    border: 2px solid var(--base);
    border-radius: 15px;
    padding: 80px 5% 50px;
    box-shadow: var(--bokashi);
}
#con1 .topTxt1_img{
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 3;
        width: 80%;
    max-width: 650px;
}



#con3 .point_img img{
    width: 70%;
    max-width: 650px;
    margin: 0 auto 50px;
    display: block;
}
#con3 .con3_title{}
#con3 .box_title1 {
    line-height: 1.4;
    font-size: 2.2rem;
    text-align: center!important;
}

.cmstitle{}
.cmstitle .en{
    color: var(--black);
    font-weight: bold;
}

.pagetitle{
    background-color: var(--color5);
}
.cmstitle .jp span img, .pagetitle .jp span img{
    width: 66px;
}
.cmstitle .jp span, .pagetitle .jp span{
    transform: translate(0px, 10px);
}
.pagetitle h2{
    font-weight: bold;
}

.f_contact_box{
    box-shadow: var(--bokashi);
}

.menu_sns .box a{
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.pagetop{
    border: 3px solid #fff;
    box-shadow: var(--bokashi);
}
/* タブレット */
@media screen and (max-width: 768px){
    .f_sitemap_inner{display: none;}
    #con3 .box_wrap{width: 96%!important;}
    #con3 .box_title1{
        font-size: 1.9rem;
        letter-spacing: 0em;
    }
    .cmstitle .jp span img, .pagetitle .jp span img{width: 100px;}
    .cmstitle .jp span, .pagetitle .jp span{transform: translate(0px, 4px);}
    .f_contact_box h4{
        line-height: 1.2;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #con1{
        background-image: url(./Dup/img/bg_sp.jpg);
    }
    
    #con3 .point_img img{width: 86%;}
    #con3 .box_wrap{width: 86%!important;}
    
    .cmstitle .jp span img, .pagetitle .jp span img{width: 60px;}
    .cmstitle .jp span, .pagetitle .jp span{transform: translate(0px, 9px);}
    
    .pagetitle.page3 h2{
        width: 300px;
        margin: 0 auto;
    }
    .f_contact_box h4{
        letter-spacing: 0;
        font-size: 41px;
    }
    .f_contact_box .mail{
        max-width: 240px;
        margin: 0 auto 20px;
    }
}


/*■■ ヘッダー,logo ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.logo1{
    max-width: 80px;
}

.l-menu{}

/* タブレット */
@media screen and (max-width: 768px){
    .header{
        padding-left: 0px;
    }
    .header-in{
        background-color: transparent;
        margin: 0;
    }
    .header .logo1{
        background-color: var(--base);
        border-radius: 0 0 25px 0;
        padding: 15px 30px;
        box-shadow: var(--bokashi2);
    }
    .logo1{
        max-width: 70px;
    }
    .menu_btn{
        box-shadow: var(--bokashi2);
    }
    .logo2 a{    max-width: 150px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .header .logo1{}
    .logo1{
        max-width: 60px;
    }
}


/*■■ cms1 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	/*height: 5em*/
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ cms2 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#cms_6-a .cate_title{
    border: none;
    background-color: var(--color2);
    border-radius: 15px;
    padding: 5px 25px;
}

#cms_6-a .box_wrap{
    border-radius: 15px;
    border: none;
    box-shadow: var(--bokashi);
}
#cms_6-a .box_wrap .cate_box{
    border-bottom: 1px solid #efefef;
}
#cms_6-a .box_wrap .cate_box:last-child{
    border-bottom: none;
}
#cms_6-a .box_wrap .box_txt1{
    color: var(--color2);
}


#cms_6-a .cate_img1{
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--bokashi);
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ cms3 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#cms_3-e .cate_title {
    margin: 0 0 25px;
    border-radius: 15px;
    padding: 5px 25px;
}

#cms_3-e .cate .cate_txt2{
    padding: 30px 5%;
    background: var(--bg2);
    border-radius: 15px;
}

#cms_3-e .cate .cate_box .box_title1{
    font-weight: bold;
    color: var(--color3);
}

/* タブレット */
@media screen and (max-width: 768px){
    #cms_3-e .cate .cate_box .box_title1{
        border-bottom: none;
    }
}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ cms4 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#cms_5-f .cate_title{
    color: var(--color3);
}
#cms_5-f .cate_box .open_bt .arrow::before, #cms_5-f .cate_box .open_bt .arrow::after, .cms_5-f .cate_box .open_bt .arrow::before, .cms_5-f .cate_box .open_bt .arrow::after{
    background-color: var(--color2);
}
#cms_5-f .cate_box .box_txt1, .cms_5-f .cate_box .box_txt1{
    background: var(--bg2);
    border-radius: 15px;
}

#cms_5-f .cate_box .open_bt .box_title1::before, .cms_5-f .cate_box .open_bt .box_title1::before{
    color: var(--color2);
}

#cms_5-f #cate0 .cate_box .open_bt .box_title1::before, .cms_5-f #cate0  .cate_box .open_bt .box_title1::before,
#cms_5-f #cate2 .cate_box .open_bt .box_title1::before, .cms_5-f #cate2  .cate_box .open_bt .box_title1::before{
    display: none;
}
#cms_5-f #cate0 .cate_box .open_bt .box_title1, .cms_5-f #cate0 .cate_box .open_bt .box_title1,
#cms_5-f #cate2 .cate_box .open_bt .box_title1, .cms_5-f #cate2 .cate_box .open_bt .box_title1{
    margin-left: 42px;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ cms5 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#cms_2-g .box_img1{
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--bokashi);
}
#cms_2-g .box_title1{
    color: var(--color2);
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ プライバシーポリシー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.privacy{
    /*box-shadow: var(--bokashi);*/
}
#page9 .box{
    background-color: var(--color4);
    background: var(--bg2);
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #google_privacy{
        background: var(--bg2);
        border-radius: 15px;
    }
}

/*■■ お問い合わせ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tel_txt h3{
    color: var(--color2);
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ サイトマップ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page10 .sitemap li a{
    background-color: var(--color5);
    border: 2px solid var(--color3);
    color: var(--color3);
}
#page10 .sitemap li a:hover{
    background-color:  var(--color2);
    border: 2px solid var(--color2);
    color: var(--color5);
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ リンクボタン ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.cate_list li{
    width: 50%!important;
}
.cate_list li a{
    border: 1px solid var(--color3);
}
.cate_list li a:hover{
    opacity: 1;
    background-color: var(--color1);
    border: 1px solid var(--color1);
    color: var(--color3);
    transform: scale(1.05);
}

.linkStyle,a{
	color: var(--color2);
	text-decoration: underline;
	transition: all 0.5s;
}
a{
    text-decoration: none;
}
.linkStyle:hover,a:hover{
	opacity: 0.7;
	text-decoration: none;
}

/* タブレット */
@media screen and (max-width: 768px){
    .cate_list li{width: 100%!important;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .cate_list li a{    padding: 10px 20px;}
}

/*■■ メインイメージ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img{
    padding-top: 60px;
    background: var(--bg2);
    position: relative;
}
#main_img::before{
    content: "";
    width: 100%;
    height: 150px;
    background: linear-gradient(180deg, rgb(224 228 233) 65px, rgba(224,228,233,0));
    position: absolute;
    top: 0;
    left: 0;
}


/* タブレット */
@media screen and (max-width: 768px){
    #main_img{
        padding-top: 130px;
    }
    #main_img::before{
        display: none;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img{
        padding-top: 105px;
    }
}


/* -------------------------------------------------------------
 モーダル
--------------------------------------------------------------*/
html.modalset{
	overflow: hidden;
}


#con3 .box_item {
    cursor: pointer;
    border-radius: 20px;
    padding: 20px 20px 40px;
    background-color: var(--color3);
    box-shadow: var(--bokashi);
}
#con3 .box_wrap .box:nth-child(2) .box_item{
    background-color: var(--color2);
}
#con3 .box_wrap .box:nth-child(3) .box_item{
    background-color: var(--color1);
}

#con3 .box_item figure{
    /*border-radius: 100%;*/
    width: 40%!important;
    margin: 20px auto 20px;
}
#con3 .box_item:hover {
    transform: scale(1.02);
}
#con3 .plus {
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 45px;
}
#con3 .box_title2, #con3 .box_txt1{
    border-top: 1px solid var(--base);
    color: var(--base);
}

#con3 .modal-wrap .box_txt1{
    color: var(--black);
}
#con3 .modal .box_title2{
	border-top: none;
}
#con3 .modal{
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	line-height: 1.7;
}
#con3 .modal-wrap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
#con3 .modal-wrap::-webkit-scrollbar {
	display: none;
}
#con3 .modal-wrap:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
}
#con3 .modal-bg{
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(140deg, rgb(108 220 247 / 50%), rgb(240 150 255 / 50%));
	width: 100%;
	height: 100%;
}
#con3 .modal-box {
    width: 90%;
    max-width: 900px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: 10px;
    padding-bottom: 23px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: var(--bokashi);
}
#con3 .modal-box .inner{
	max-height: 650px;
    overflow: auto;
	-ms-overflow-style: none;
}
#con3 .modal-box .inner::-webkit-scrollbar {
  width: 2px;
  height: 10px;
}
#con3 .modal-box .inner::-webkit-scrollbar-track {
  border-radius: 5px;
  box-shadow: 0 0 4px #aaa inset;
}
#con3 .modal-box .inner::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #333;
}
#con3 .modal-box .modal-close {
    cursor: pointer;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
}
#con3 .modal_img{
    max-width: 600px;
}
#con3 .modal_title1{
	padding-top: 60px;
}
#con3 .modal_title1:before{
	content: "";
	display: block;
	background-color: #666; 
	width: 1px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 2px;
}
#con3 .modal_title1 span{
	transform: rotate(90deg);
	display: block;
	line-height: 1;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #con3 .box_wrap{
        margin: 0 auto;
    }
    #con3 .box_wrap .box{
        width: 100%!important;
    }
    #con3 .modal-box .modal-close {
        top: 15px;
        right: 10px;
        width: 40px;
        z-index: 3;
    }
    #con3 .modal-box .inner{
        max-height: 500px;
    }
}

/*■■ ボタン設置 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#btn{
    z-index: 10;
    position: fixed;
    transition: all 0.3s ease-out;
    right: calc(60px + 50px);
    bottom: 50px;
    max-width: 200px;
    border: 2px solid var(--base);
    border-radius: 50px;
    box-shadow: var(--bokashi);
}
#btn:hover{
    transform: scale(1.05);
}
@media screen and (max-width: 667px){
.copy{
    padding-bottom: 130px;
}
}

/*■■ before after設置 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#cms_5-f .square_img {
    position: relative;
    width: 100%; /* 幅を親要素に合わせる */
    aspect-ratio: 1 / 1; /* 正方形に設定（1:1の比率） */
    overflow: hidden; /* はみ出た部分を隠す */
    border-radius: 20px;
}

#cms_5-f .ba_box .box_img1_wrap,#cms_5-f .ba_box .box_img2_wrap{
    width: 44%;
    padding: 0px 1.5%;
    border-radius: 15px;
}

#cms_5-f .tri{
    width: 5%;
}
#cms_5-f .ba_title{
    background-color: var(--base);
    position: absolute;
    z-index: 3;
    top: -1px;
    left: calc(1.5% - 1px);
    border-radius: 0 0 20px 0;
    padding: 5px 15px 5px 21px;
}

@media screen and (max-width: 667px){
    #cms_5-f .ba_box .box_img1_wrap,#cms_5-f .ba_box .box_img2_wrap{
        width: 100%;
    }
    #cms_5-f .tri{
        width: 15%;
        margin: 15px 0;
    }
    #cms_5-f .ba_title{
        padding: 5px 15px 5px 15px;
    }
}