/** font **/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@452;700&family=Noto+Sans+JP:wght@100;400;700&display=swap');


:root{
    --font-jp: 'Montserrat', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
body, .font_sans-serif, #main_img .txt, #page_title, #f_contact .con_txt, #intro h2, #contents1 h2, #contents2 h2, #top_cms h2, #top_info h2, #f_contact .con_bt, .more_bt a, #top_info .more_bt2 a{
    font-family: var(--font-jp)!important;
}

/** color **/

:root{
    --color1: #336633;
    --color2: #EDF4E6;
    --color3: #90AA22;
    --color4: #DAE0D1;
    --color5: #F6FBF6;
    --black: #474944
}

/** other **/

.shadow-l{
    box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
}

#wrap.index #header{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
#wrap.index #header.head_fix{
    pointer-events: auto;
    opacity: 1;
}
#wrap.index #pc_nav ul{
    height: 70px!important;
}
#wrap:not(.index){
    background-color: var(--color5);
}

#sp_nav li:last-of-type{
    text-align: center;
}
#sp_nav a.active{
    border-color: currentColor;
}

#main_img_h::before{
    display: none;
}
#main_img_h .main_bg{
    border-radius: 0 50px 0 0;
}
#main_img_h .top_txt{
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-30%);
}
#main_img_h .main_txt_wrap{
    z-index: 1;
}
#main_img_h .main_txt{
    width: calc(120% - (500px + 10vw));
    box-sizing: border-box;
}
#main_img_h h2{
    line-height: 1.5;
    font-size: calc(20px + 3vw);
    font-weight: 100;
}
#main_img_h .main_img{
    width: calc(500px + 5vw);
    right: 10vw;
    bottom: 0;
    max-width: 750px;
    background-position: bottom;
    background-size: 100% auto;
}

#top_news{
    background-color: #f2f2f2;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,0.2) 5px, rgba(255,255,255,0.2) 10px )
}
#top_news .news_sub_title{
    font-weight: 100;
}

.con_no{
    transform: rotate(-5deg);
}

#intro{
    padding: 100px 0;
}
#intro .intro_bg, #intro .bg_box{
    border-radius: 0 0 50px 0;
}
#intro > .width_1280-max{
    align-items: flex-start;
}
#intro .con_no{
    margin-left: -40px;
    transform-origin: left bottom;
}
#intro h2{
    font-weight: 100;
    font-size: 40px;
}
#intro figure{
    border-radius: 50px 0 50px 0;
}

#contents1::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,0.2) 5px, rgba(255,255,255,0.2) 10px );
    z-index: -3;
}
#contents1 span{
    z-index: -4;
}
#contents1 .img_box figure{
    border-radius: 0 0 50px 0;
}
#contents1 .con_no{
    margin-left: -40px;
    transform-origin: left bottom;
}
#contents1 h2{
    font-size: 40px;
    font-weight: 100;
}

#contents2{
    padding-bottom: 100px;
    margin-bottom: 0;
    background-color: var(--color5);
}
#contents2 .cate_box{
    border-radius: 50px 50px 0 0;
}
#contents2 h2{
    font-weight: 100;
    font-size: 40px;
}

#top_cms{
    padding-top: 100px;
    background-color: var(--color5);
}
#top_cms h2{
    font-weight: 100;
    text-align: center;
}
#top_cms h2 span{
    font-weight: normal;
    display: block;
    margin-top: 20px;
}

#page_title{
    clip-path: ellipse(calc(50% + 300px) 100% at 50% 0%);
}
#page_title .box{
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,0.1) 5px, rgba(255,255,255,0.1) 10px );
}

.more_bt a{
    background-color: var(--color1);
    color: #fff;
}
.more_bt a:hover{
    background-color: transparent;
}
.cate_list .more_bt a:hover{
    background-color: var(--color3);
}

.cate_title{
	background-color: transparent;
	padding: 0;
	margin: 0;
	display: block;
	border: none;
	width: 100%!important;
	font-size: 24px;
	text-align: left;
	padding-bottom: 10px!important;
	margin-bottom: 50px;
	border-bottom: solid 2px currentColor;
	color: var(--black);
	font-weight: bold;
	position: relative;
}
.cate_title:first-letter{
    font-size: 28px;
    color: var(--color3);
}
.cate_title::before{
    position: absolute;
    content: "";
    width: 50px;
    height: 2px;
    left: 0;
    bottom: -2px;
    background-color: var(--color3);
}

.BA_type1 .box_img1::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -50px;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--color3);
}
.BA_type1 .box_img1 {margin-right: 40px;}
.BA_type1 .box_img2 {margin-left: 40px;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {
    top: 0;
    left: 0;
    position: absolute;
    height: 33px;
    width: 87px;
    background-color: #fff;
    color: var(--black);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    border-radius: 0 0 10px 0;
}
.BA_type1 .box_img1::after {content: "before";}
.BA_type1 .box_img2::after {content: "after";}

#f_contact .con_bt{
    font-weight: 100;
}
#f_contact a span.hover_box{
    opacity: 0.6;
}

.footer_banner{
    right: 90px;
    z-index: 10;
    height: 50px;
}
.footer_banner a{
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}


/** tablet 780 **/
@media screen and (max-width: 768px){
#wrap.index #pc_nav ul{
    height: 90px!important;
}
#main_img_h .main_txt {
    width: 40%;
}
#main_img_h .main_img {
    width: 75%;
    right: -12vw;
}
#main_img_h .top_txt{
    background-image: url('./Dup/img/main_txt_sp.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 100%;
    top: -50px;
    height: calc(100vh - 100px);
    width: auto!important;
    transform: none;
}
#intro .intro_bg, #intro .bg_box{
    border-radius: 0;
}
#intro .con_no, #contents1 .con_no{
    margin-left: auto;
    margin-right: auto;
    transform-origin: auto;
    margin-bottom: 20px;
}
#contents1 .img_box figure{
    border-radius: 50px 0 50px 0;
}
#copyright{
    padding-bottom: 80px;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#wrap.index #pc_nav ul{
    height: 65px!important;
}
#main_img_h .main_bg{
    background-position: 40% center;
}
#main_img_h .main_img {
    width: 70%;
}
#main_img_h .main_txt {
    width: 50%;
}
#main_img_h .top_txt {
    top: 30px;
    left: 10px;
}
#intro h2, #contents1 h2, #contents2 h2{
    font-size: 24px;
}
.cate_title{
    font-size: 20px;
}
.cate_title:first-letter{
    font-size: 24px;
}

.BA_type1 .box_img1 {margin-right: 0;}
.BA_type1 .box_img2 {margin-left: 0}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {height: 30px;font-size: 15px;}
.BA_type1 .box_img1::before {top: auto;left: 0;right: 0;bottom: -40px;transform: rotate(90deg);}
.footer_banner {
    right: 80px;
    height: 50px;
    width: calc(100% - 90px);
}
}