﻿@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
.font1,#contents h3,.cms_title{
    font-family: 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
}
.font2,
#contents .box1 h3::before,
#contents .box2 h3::before,
#contents .box3 h3::before{
    font-family: 'Amatic SC', cursive;
    
}

.linkStyle{
    color:#16a56c;
    text-decoration:underline;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
}


/*--all page---------------------------
-------------------------------------*/
html{font-size:115%;}
header{background: rgba(255,255,255,0.5);}
.logo{width:400px;}
.svg_box2{display:none;}
#bottom_menu{
    margin-bottom: 0;
    padding-bottom: 200px;
    background-image: url(./Dup/img/ft.png);
    background-repeat: repeat-x;
    background-position: bottom;
}
footer .bg-mask{background-color:transparent;}
.footer_cms{color:#fff;}
#copyright{background-color: #16a56c;}


/*--top page---------------------------
-------------------------------------*/
#main_img .svg_box{display:none;}
.item2{
    top: 23%;
    left: 6%;
    z-index: 1;    
}
.item2 img{width:auto;}
.catch{
    font-size: 3rem;
    letter-spacing: 35px;
    top: 35%;
    left: 12%;
    z-index: 1;
    line-height: 2;
}
#intro{padding-bottom:0;}
#intro_txt{
    background-image:url(./Dup/img/bg.jpg);
    background-size:cover;
    position:relative;
}

#intro_txt::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    top:0;
    left:0;
    z-index:1;
}
#intro_txt h2{letter-spacing:5px;}
#intro_txt p{
    letter-spacing: 3px;
    line-height: 1.6;
}
#intro_txt h2,#intro_txt p{
    position:relative;
    z-index:2;
    color:#fff;
}
.item1 img{width:auto;}
.con_main_title{
    margin:10px 0 50px;
    letter-spacing:5px;
}
#contents{padding-top:100px;}
#contents .box{margin-bottom:100px;}
#contents h3{
    position:relative;
    letter-spacing:5px;
}
#contents h3::before{
    position:absolute;
    display:block;
    font-size:3rem;
    opacity:0.5;
    color:#d0b7a2;
    top:-50px;
    left:0;
    z-index:-1;
}
#contents .box1 h3::before{
    content:'SUPPORT 01';

}
#contents .box2 h3::before{
    content:'SUPPORT 02';
}
#contents .box3 h3::before{
    content:'SUPPORT 03';
}
.box1 .grid_6:first-of-type,
.box2 .grid_6:nth-of-type(2),
.box3 .grid_6:first-of-type{
    margin-top:70px;
}
#contents .box{position:relative;}
#contents .box1::before,#contents .box2::before,#contents .box3::before{
    content:'';
    position:absolute;
    display:block;
    z-index:-1;
}
#contents .box1::before,#contents .box3::before{
    width: 170%;
    height: 88%;
    background-color: #f7f6f1;
    top: 100px;
    left: -50%;
    border-radius: 0 300px 300px 0;
}
#contents .box2::before{
    width: 170%;
    height: 88%;
    background-color: #f7f6f1;
    top: 100px;
    right: -50%;
    border-radius: 300px 0 0 300px;
}
.top_cms_title{
    font-size:3rem;
    color:#d0b7a2;
}
    


/*--under page---------------------------
-------------------------------------*/
#page_title{background-position:center;}
#page_title #filter_white {padding-top: 250px!important;}
#page_title .svg_box{display:none;}
.cate_list li a {background-color: #f7f6f1;}
.cate_list li a:hover{
    background-color:#16a56c;
    color:white;
}


/* ---------- responsive ---------- */
@media screen and (max-width: 1870px){
#contents .box1::before, #contents .box3::before, #contents .box2::before{width:165%;}
}
@media screen and (max-width: 1690px){
#contents .box1::before, #contents .box3::before, #contents .box2::before{width:150%;}
}
@media screen and (max-width: 1295px){
#contents .box1::before, #contents .box3::before, #contents .box2::before{width:130%;}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.item2 {
    top: 34%;
    left: 2%;
}
.item2 img{width: 76%;}
.catch {
    font-size: 1.7rem;
    letter-spacing: 25px;
    top: 45%;
    left: 9%;
}
#intro_sp{display:none;}
#contents .box{margin-bottom:50px;}
#contents .box1::before, #contents .box3::before, #contents .box2::before{
    width:145%;
    height:80%;
}
#top_cms{margin-top:50px;}
.top_cms_title{margin: 0 20px;}
#footer{padding-bottom:0;}
.footer_cms{background-color: #16a56c;}
#page_title #filter_white {padding-top: 240px!important;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.logo {
    width: 230px;
}
.menu_bt{margin-top:20px;}
.item2 {left: 1%;}
.item2 img{width: 45%;}
.catch {
    font-size: 1.2rem;
    letter-spacing: 8px;
    left:5%;
}
.con_main_title{
    margin: 10px 0 0;
    font-size: 18px;
    letter-spacing: 2px;
}
.box2 .grid_6:nth-of-type(2){margin-top:0;}
#footer .grid_12{margin-bottom:0;}
#page_title #filter_white {padding-top: 150px!important;}
#logo2{width:270px;}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
.cate_list li a{padding-top:20px;}
#contact_tel a{padding-top:35px;}
}


