﻿@font-face {
font-family: "kanjuku";
  src: url("./Dup/img/kanjuku.otf") format("otf"),url("./Dup/img/kanjuku.woff") format("woff"),url("./Dup/img/kanjuku.woff2") format("woff2");
}
.font1,.cate_title{font-family: "kanjuku", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
.main_img,#intro,#contents,#contents .box:nth-of-type(3),#con2,#top_cms .cms_title,
.title_img{position: relative;}
/*リピートなし*/
.main_img:before,.main_img:after,.catch,#intro:before,#intro:after,.flower,#contents:before,#contents:after,#contents .box:nth-of-type(3):before,
#top_cms .cms_title:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

.main_img:before{
background-image: url(./Dup/img/main1.png);
background-size: 100%;
width: 45vw;
height: 24vw;
top: 0;
right: 0;
}
.main_img:after{
background-image: url(./Dup/img/main2.png);
background-size: 100%;
width: 40vw;
height: 20vw;
bottom: 0;
left: 0;
}
.main_img_wrap .catch{
background-image: url(./Dup/img/catch.png);
background-size: 100%;
width: 36vw;
height: 16vw;
bottom: auto;
top: 2vw;
left: 3vw;
}
#intro:before{
background-image: url(./Dup/img/obj1.png);
background-size: 100%;
width: 41vw;
height: 19vw;
top: 0;
left: 0;
}
#intro:after{
background-image: url(./Dup/img/obj2.png);
background-size: 100%;
width: 41vw;
height: 25vw;
top: 0;
right: 0;
}
#intro .flower,#con2 .flower{
background-image: url(./Dup/img/obj3.png);
background-size: 100%;
width: 90vw;
height: 21vw;
bottom:-3vw;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#contents:before{
background-image: url(./Dup/img/obj1.png);
background-size: 100%;
width: 41vw;
height: 19vw;
top: 0;
left: 0;
}
#contents:after{
background-image: url(./Dup/img/obj1.png);
background-size: 100%;
width: 41vw;
height: 19vw;
bottom: 0;
left: -5vw;
transform: scale(1, -1);
}
#contents .box:nth-of-type(3):before{
background-image: url(./Dup/img/obj2.png);
background-size: 100%;
width: 50vw;
height: 28vw;
top: -25%;
right: -5%;
}
#contents .flower:nth-of-type(1){
background-image: url(./Dup/img/obj4.png);
background-size: 100%;
width: 21vw;
height: 21vw;
top: 0;
right: 1vw;
z-index: 2;
}
#contents .flower:nth-of-type(2){
background-image: url(./Dup/img/obj5.png);
background-size: 100%;
width: 18vw;
height: 17vw;
bottom: -4vw;
left: -2vw;
z-index: 1;
}
#top_cms .cms_title:before{
background-image: url(./Dup/img/obj7.png);
background-size: 100%;
width: 5vw;
height: 6vw;
bottom: -55px;
left: -70px;
}
#page_title_box:before{
background-image: url(./Dup/img/obj4.png);
background-size: 100%;
width: 21vw;
height: 21vw;
top: 0;
right: 1vw;
z-index: 2;
}
#page_title .flower:nth-of-type(1){
background-image: url(./Dup/img/obj5.png);
background-size: 100%;
width: 18vw;
height: 17vw;
bottom: -2vw;
left: -2vw;
z-index: 2;
}
#page_title .flower:nth-of-type(2){
background-image: url(./Dup/img/obj4.png);
background-size: 100%;
width: 18vw;
height: 17vw;
top: -2vw;
right: -2vw;
z-index: 2;
}
/*--------------------------------
全体
--------------------------------*/
#loading_line .line.bg_color1{background-color: #ffd9a7;}
#loading_logo{max-width: 200px;}

#wrap{
width: 100%;
margin-top: 0;
}

#top_cms,.all_page.bg_color4{background-color: #fdf9f5;}
.main_img_wrap{width: 100%;}
.svg_box{display: none;}

.img-container:before{background: #F09B55;}
.t_cms_img2 .img-container:before {background: #F5D5AE;}

footer{
background-image: url(./Dup/img/bg4.jpg);
background-size: cover;
}
footer .txt_white{color: #333;}
footer .logo{    width: 70%!important;}

.fix_banner{
position: fixed;
bottom: 0;
right: 75px;
z-index: 10;
}
.fix_banner p{width: 300px;}
@media  screen and (max-width: 768px){
    .fix_banner p{width: 250px;}
}
/* スマホ時真ん中へ */
@media  screen and (max-width: 667px){
.fix_banner{
width: 220px;
bottom: 10px;
right: auto;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
.fix_banner p{padding: 2px 5px;}
}
/*--------------------------------
TOP
--------------------------------*/
.top_nav{
text-shadow:
0 0 10px #b04c00,
0 0 15px #f09b55,
0 0 20px #f09b55;
}
.main_img_wrap{height: 48vw;background-position: center top -180px;}
.main_wrap{margin-top: 48vw;}
#intro,#con2{padding-bottom: 14vw;}
.intro_wrap{position: relative;z-index: 1;}

/* モーダル */
html.modalset{
	overflow: hidden;
}
.modal{
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
}
.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;
}
.modal-wrap::-webkit-scrollbar {
	display: none;
}
.modal-wrap:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
}
.modal-bg{
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
}
.modal-box{
	width: 90%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.modal-box .inner{
	background: #fff;
	max-height: 90vh;
	box-sizing: border-box;
	overflow: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.modal-box .inner::-webkit-scrollbar {
	display:none;
}
.modal-box .inner > :first-child {
	margin-top: 0;
}

.modal-box .modal-close{
	cursor: pointer;
	position: absolute;
    top: 0;
    right: 0;
}
.modal-box .modal-close span{
	display: block;
	width: 50px;/*枠の大きさ*/
	height: 50px;/*枠の大きさ*/
	position: relative;
}

.modal-box .modal-close span::before, .modal-box .modal-close span::after{
	content: "";
	display: block;
	width: 100%;/*バツ線の長さ*/
	height: 2px;/*バツ線の太さ*/
	background: #000;
	transform: rotate(45deg);
	transform-origin:0% 50%;
	position: absolute;
	top: calc(14% - 1px);
	left: 14%;
}

.modal-box .modal-close span::after{
	transform: rotate(-45deg);
	transform-origin:100% 50%;
	left: auto;
	right: 14%;
}
.modal-open span{cursor: pointer;}

.modal_title_wrap{
	top: 0;
	left: 0;
}
.modal_title1{padding-top: 60px;}
.modal_title1:before{
	content: "";
	display: block;
	background-color: #666; 
	width: 1px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 6px;
}
.modal_title1 span{
	transform: rotate(90deg);
	display: block;
	line-height: 1;
}
.modal_txt_wrap{padding-right: 50px;}
.modal_txt_wrap.over{position: relative;}
.modal_txt_wrap.over:before{
content: "SCROLL 》";
font-size: 12px;
color: #333;
position: absolute;
bottom: 5%;
right: -10px;
transform: rotate(90deg);
}

.modal_txt{
overflow-y: auto;
overflow-x: hidden;
max-height: 45vh;
padding-right: 5%;
}
.modal_txt::-webkit-scrollbar{width: 2px;}
.modal_txt::-webkit-scrollbar-track {background-color: #f9e8d9;}
.modal_txt::-webkit-scrollbar-thumb {background-color: #f07314;}

.modal_txt span{display: block;word-wrap: break-word;}
@media  screen and (max-width: 768px){
.modal_txt_wrap{
    padding-left: 0;
    padding-right: 0;
}
.modal_txt_wrap.over:before{right: -47px;}
.modal_txt{max-height: 34vh;}
}
@media  screen and (max-width: 667px){
    .modal_txt{max-height: 45vh;}
}

#contents{
background-color: #fefaf7;
}
#contents .box figure:after{display: none;}
#contents .box .txt_wrap,#contents .box figure{position: relative;z-index: 1;}

.check_box li{
position: relative;
padding-left: 30px;
margin-bottom: 10px;
}
.check_box li:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
.check_box li:before{
background-image: url(./Dup/img/check.png);
width: 20px;
height: 20px;
top: 3px;
left: 0;
}


.other .box{background-color: #bf9d74;border: none;}
.other .box:last-child{border: none;}
.other .box:hover{background-color: #fff;}
.other .box figure{opacity: 0.7;}
.other .box:hover figure{opacity: 0.5;}
.other .box p, .other .box h2 span,
.other .box:hover p, .other .box:hover h2 span{color: #333;}

/* TOP お知らせ */
.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}
}
/*--------------------------------
下層
--------------------------------*/
#page_title p.txt_shadow-l{text-shadow: none;}
.cms_wrap.width_90per,#page7,#page8,#page9,#page10{
width: 100%!important;
max-width: none;
margin: 0;
padding-left: 20%;
padding-right: 5%;
}
@media  screen and (max-width: 667px){

.cms_wrap.width_90per,#page7,#page8,#page9,#page10{padding-left: 5%;}

}

#cms_3-c .cate_box:first-of-type .box_title3{padding-top: 0;}

.v_type2 .demo_box {padding-top: 70px}
.v_type2 .cate{counter-reset: number 0;}
.v_type2 .cate_box {padding: 50px 20px 30px;}
.v_type2 .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -25px;
    left: 0;
    z-index: 1;
    font-size: 50px;
    font-weight: 100;
    font-style: italic;
    color: #F5D5AE;
    background-color: #fff;
    line-height: 1;
    padding: 0 10px 0 0;
}
@media screen and (max-width: 667px){
.v_type2 .cate_box{padding: 42px 25px 25px;}
.v_type2 .cate_box:before{top: -31px;font-size: 48px;}
}


.v_type3 .cate_box{border: 1px solid #F09B55;}
.v_type3 .box_title1{color: #F07314;}

@media  screen and (max-width: 1000px){
    .main_img_wrap{height: 60vw;}
    .main_wrap{margin-top: 60vw;padding-top: 0;}
    .main_img_wrap .catch{
        width: 40vw;
        height: 18vw;
        top: 7vw;
        left: 13vw;
    }
}
/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){
    .main_img_wrap{height: 47vh;}
    .main_wrap{margin-top: 47vh;}
    .main_img:before{
        width: 55vw;
        height: 30vw;
    }
    .main_img:after{
        width: 50vw;
        height: 25vw;
    }
    .main_img_wrap .catch{
        width: 40vw;
        height: 18vw;
        top: 7vw;
        left: 13vw;
    }
    
    #intro, #con2{padding-bottom: 170px;}
    #contents .flower:nth-of-type(1){
        width: 30vw;
        height: 29vw;
        top: -34px;
        right: -22px;
    }
    #contents .flower:nth-of-type(2){
        width: 25vw;
        height: 23vw;
        bottom: -33px;
        left: -28px;
    }
    #top_cms .cms_title:before{
        width: 12vw;
        height: 14vw;
        bottom: -56px;
        left: -47px;
    }
    #page_title .flower:nth-of-type(1){
        width: 24vw;
        height: 24vw;
    }
    #page_title .flower:nth-of-type(2){
        width: 23vw;
        height: 22vw;
        bottom: 4px;
        left: -22px;
    }
    .cate_list li{width: 47%;}
}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
    #header{padding-top: 10px;}
    .main_img_wrap{height: 49vh;background-position: top left -50px;}
    .main_wrap{margin-top: 49vh;}
    .main_img_wrap .catch{
        width: 50vw;
        height: 22vw;
        top: 13vw;
        left: 10vw;
    }
    
    #intro, #con2{padding-bottom: 100px;}
    #intro .flower, #con2 .flower {
        width: 100vw;
        height: 24vw;
        bottom: 0;
    }
    #contents .flower:nth-of-type(1){
        width: 40vw;
        height: 39vw;
        top: -15px;
        right: -14px;
    }
    #contents .flower:nth-of-type(2){
        width: 35vw;
        height: 33vw;
        bottom: -26px;
        left: -20px;
    }
    #top_cms .cms_title{padding-left: 20px;}
    #top_cms .cms_title:before{
        width: 18vw;
        height: 20vw;
        bottom: -32px;
        left: -22px;
    }
    .all_page:before{width: 100%;}
    #page_title .img-container::after{background-color: rgba(240,155,85,0.2);}
    #title_img span{height: 100%;}
    #page_title .flower:nth-of-type(1){
        width: 32vw;
        height: 30vw;
        bottom: -13px;
        left: -15px;
    }
    #page_title .flower:nth-of-type(2){
        width: 32vw;
        height: 27vw;
        top: -17px;
        right: -15px;
    }
    .cate_list li{width: 100%;}
}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #333; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #333;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #333;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #F07314;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #F5D5AE;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #F09B55;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #F9E8D9;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #F07314;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #F5D5AE;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #F09B55;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #F9E8D9;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #F07314;}
.border_color2,.hvr_border_color2:hover{border-color: #F5D5AE;}
.border_color3,.hvr_border_color3:hover{border-color: #F09B55;}
.border_color4,.hvr_border_color4:hover{border-color: #F9E8D9;}