﻿@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* font */

:root{
	--font-en: 'Montserrat', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
#intro .intro_top, .pop400, .con_top{
	font-family: var(--font-en);
}



/* all page */
/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #AE9069;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1{color: #adb1a5;} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: #BDC0B7;} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #BDC0B7;} /* メインカラー */
.bg_color2{background-color: #f3f3f3;} /* サブカラー */
.bg_color3{background-color: #a7aba1;} /* アクセントカラー1 */
.bg_color4{background-color: #c9baa9} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #BDC0B7;}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #a67c52}
.border_color4{border-color: #bdc0b7;}

#page_title .page_title_box {
    background-color: #a7aba1!important;
}
.cate_list li a:hover {
    background-color: rgb(255 255 255 / 10%)!important;
}

#wrap, #contents3 .con_box {
    background-color: #f8f9fc;
}
.nav_menu_more:first-of-type a .icon:before {
    content: "\f075";
    top: -3px;
    left: -30px;
}
#pc_nav li a::after, #top_pc_nav li a::after {
    background: rgba(0,0,0,0.3);
}
footer .tel_bt a{
    color: #333;
}

/* header */
header.scr_header {background-color: rgba(247,248,251,0.8)!important; backdrop-filter: blur(3px);}
header #logo {max-width: 160px;}
header.scr_header #logo {max-width: 150px;}
#pc_nav li, #top_pc_nav li, #footer_nav li {
    max-width: 250px;
}
#pc_nav li a, #top_pc_nav li a, #footer_nav li a {
    color: #333;
}
#pc_nav li:last-of-type a:hover::after, #pc_nav li:last-of-type a::before{display: none;}
#pc_nav li:last-of-type a{
    border: 1px solid;
    padding: 9px 20px;
    border-radius: 45px;
    transition: all 0.3s;
}
#pc_nav li:last-of-type a:hover{
    transform: translateY(-5px);
}
.button_container span {
    background: #000;
    color: #000;
}

/* top ----------------*/
/* main img */
#main_img:before {background-color: rgba(255,255,255,0.3);}
.menu p.bg_white{background: none;}
#main_img{
    justify-content: space-around;
}
#main_img #left, #main_img #right {
    width: 45% !important;
    height: 90vh !important;
    margin-top: 5vh;
}

/* main */
.back1:before, .back2:before, #intro .num, #contents1 .num, #contents2 .num, #contents3 .num{display: none;}
.line:before {background-color: #e0e0e0!important;}

main.top::before {
    /* content: ""; */
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 1000;
    pointer-events: none;
    background-image: url(./Dup/img/leaf01.png), url(./Dup/img/leaf02.png);
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: left -55px bottom 68px, right 0px bottom 140px;
}


/* intro */
#intro_wrap {background: none;padding: 7% 0;}
#intro .intro_title{
    padding: 0 7%;
}
#intro .intro_txt{
    margin-bottom: 50px;
    padding: 0 7%;
    line-height: 3;
}
#intro .intro_top{
    top: 7%;
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    font-size: 20px;
    opacity: 0.7;
}

/* contents */
#contents1{
    margin-bottom: 0;
}
#contents1 .con_img, #contents2 .con_img{
    position: relative;
}
#contents1 .con_img img, #contents2 .con_img img{
    position: relative;
    z-index: 3;
}
#contents1 .con_img::before, #contents2 .con_img::before {
    content: '';
    position: absolute;
    width: 21vw;
    height: 43vh;
    z-index: 2;
    left: -56px;
    bottom: 10px;
    background-image: url(./Dup/img/item01.png);
    background-position: bottom right;
    background-size: 100%;
    background-repeat: no-repeat;
}
#contents2 .con_img::before {
    background-image: url(./Dup/img/item02.png);
    right: -56px;
    left: auto;
}
#contents2 .con_img {
    border-radius: 0 0 400px 0;
}
#contents3 {
    margin-top: 100px;
}
#contents3 .con_box {
    padding: 5% 3%;
}
#contents3 .line:before {
    left: 0;
    transform: none;
}
#contents3_wrap:before, #contents3_wrap:after {
    height: 140%;
    top: -20%;
    background-attachment: fixed;
}
#contents3_wrap:after {
    background-color: rgba(255,255,255,0.5);
}
.con_top{
    font-size: 20px;
    opacity: 0.7;
    display: block;
    line-height: 1;
    z-index: 1;
}
.animate {
  opacity: 0;
  filter: blur(7px);
  transition: all 1s;
}
.animate.show {
  opacity: 0.1;
  filter: blur(1px);
}
.shadow01{
    width: 50%;
    position: absolute;
    top: -20%;
    right: -5%;
    transform: rotate(14deg);
}
.shadow02{
    width: 53%;
    position: absolute;
    top: -3%;
    left: -150px;
    transform: rotate(-20deg);
}

#intro .con_btn a, #contents3 .con_btn a{
    border: 1px solid;
    background-color: #BDC0B7;
    color: #fefffb;
    padding: 20px;
    border-radius: 5px;
    line-height: 1;
    width: 100%;
    text-align: center;
    max-width: 300px;
    border-radius: 45px;
    box-sizing: border-box;
}
#intro .con_btn a:hover, #contents3 .con_btn a:hover{
    background-color: #fff;
    color: #BDC0B7;
}

/* topcms */
.more_btn:before {
    width: 100%;
}
.more_btn:hover:after {transition-delay: 0s;}

/* linkcms */
#info_contact .con_box a {
    display: block;
    z-index: 1;
}
#info_contact .con_box a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 10px;
    left: 10px;
    border: solid 1px #bdc0b7;
    opacity: 0.5;
    background-color: #bdc0b7;
}
.zoomup .con_img:before {
    transition: all .5s;
}
.zoomup:hover .con_img:before {
    background-color: rgb(141 141 141 / 19%)!important;
}

/* footer */
#footer {
    background-color: rgba(237,237,237,0.5);
}


/* under page */
#page_title:before{
    background-color: rgba(255,255,255,0.60);
}


/* 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);
}
.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}
}

/* cms3 */
.g_type1 > div{justify-content: space-around;}
.g_type1 .modal_bt{cursor: pointer}
.g_type1 .modal_bg{top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 9998;}
.g_type1 .modal_box{max-height: 80%;overflow-y: auto;z-index: 9999;}
.g_type1 .close_bt{cursor: pointer}
.g_type1 .cate_box {position: relative;width: 22.99999%!important;margin: 0 1%;margin-bottom: 20px;overflow: hidden; }

@media all and (-ms-high-contrast:none){
.g_type1 .modal_box .box_txt2 a {padding: 8px 10px 2px;}
}
@media screen and (max-width: 768px){
.g_type1 .cate_box {width: 30.99999%!important;}
}
@media screen and (max-width: 667px){
.g_type1 .cate_box {width: 47.99999%!important;}
}

/* cms5 */
.v_type3 .cate_box{border: 1px solid #bdc0b7;}
.v_type3 .box_title1{color: #afb1ac;}


/* page4 */
#page4 .bnr{
    width: 100%;
    max-width: 700px;
}




/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#logo {
	opacity: 0;
}
.page #logo {
	opacity: 1;
	max-width: 270px;
}
header.scr_header #logo {
	opacity: 1;
}
.overlay-menu .nav_menu_more a{
    background-color: #95978f;
}
#overlay .left li {
    max-width: 230px;
}
#main_img #left, #main_img #right {
    width: 45% !important;
    height: 40vh !important;
    margin-top: 2vh;
}
#intro .intro_top {
    top: 1%;
}
.shadow01 {
    top: -30%;
}
.shadow02 {
    width: 62%;
    top: -40%;
    left: -100px;
    transform: rotate(-31deg);
}
.con_top {
    font-size: 17px;
}
#contents1 {
    margin-bottom: 0;
}
#contents1 .con_img::before{
    left: -30px;
}
#contents2 .con_img::before {
    right: -12px;
}
#contents2 .con_box {
    margin-top: 0;
}
#contents2 .con_img {
    border-radius: 0 0 160px 0;
}
#contents3_wrap:before, #contents3_wrap:after {
    height: 120%;
    top: -10%;
}
#contents3 .con_box {padding: 5%;}

.page #logo {
    max-width: 160px;
}
#page_title .page_title_box {
    width: 100%;
    background-color: rgb(167 171 161 / 61%)!important;
}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main_img #left, #main_img #right {
    width: 90% !important;
    height: 45vh !important;
    margin-top: 3.5vh;
}
header #logo {
    max-width: 130px;
}
header.scr_header #logo {
    max-width: 110px;
}
#main_img .main_txt{
    margin-top: -20px;
}
#intro .intro_top {
    top: -1%;
}
#intro .intro_txt {
    line-height: 2;
}
.shadow01 {
    top: -8%;
    width: 70%;
}
.shadow02 {
    width: 82%;
    top: -1%;
    left: -35px;
    z-index: 5;
}
.con_top {
    margin-bottom: 5px;
}
#contents1 {
    margin-bottom: 10px;
}
#contents1 .con_img::before{
    width: 51vw;
}
#contents2 .con_img::before {
    width: 51vw;
    right: -4px;
}
.page #logo, header.scr_header #logo {
    max-width: 100px;
}
#overlay .left {
    padding-left: 10%;
}

#contents1 .con_box, #contents2 .con_box {
    padding-left: 5%;
}
#footer_txt span{
    width: 85%;
}
}


