@charset "UTF-8";

/*----------------------------------------------------
共通
----------------------------------------------------*/

/* FS ------------------------*/
img{
    vertical-align:top;
}
.main{
margin: 0 auto;
max-width: 1000px;
text-align: center;
font-family: 'Noto Serif JP', serif;
}
.main a{
text-decoration: none;
}
.main a:visited  {
text-decoration: none;
}
.main p{
margin: 0;
padding: 0;
}

/* 領域100％時に使用 ------------------------*/
/*.fs-l-main{
max-width: 100%;
margin:0 auto;
padding: 0;
}
.fs-l-pageMain {
    max-width: 100%;
    width: 100%;
}
*/
/*---------
アニメーション
------------------------------*/
.txt_ul_left:before{
    position: absolute;
    top: 1.3em;
    left: 0;
    content: "";
    display: inline-block;
    width: 0%;
    height: 2px; /*線の太さ*/
    background: #3c3c3c; /*線の色*/
    animation: txt_ul_left 1s ;
    animation-fill-mode:forwards;
}

/*---------
タイトル
------------------------------*/
.title{margin:14% auto;}
.title .catch{margin-bottom:2% ; font-size: 3.6rem;}
.title h2{margin: 0;font-size: 10rem;letter-spacing: 10px;line-height: 0.9;}
.title span{display: inline-block; font-size: 4rem;letter-spacing: 3px;}

.group-nav{margin-bottom: 20%;font-size: 3.8rem;}
.group-nav h2{font-size: 4.8rem;}
.group-nav ul{display: inline-block; margin: 0 auto 5%;text-align: left;}
.group-nav li{margin-bottom: 3%;font-size: 3.8rem;}
.group-nav a{color: #3c3c3c; border-bottom:2px solid;}

.item-box{position:relative;}
.txt{display: inline-block;font-size: 3.4rem;/* letter-spacing: 1px; */line-height: 1.5;}
.ttl-no{font-size: 10rem;}
.ttl-no span{font-size: 7rem;}
.txt-area h3{margin-bottom: 2%;font-size: 4.8rem;}
#item-area1 h2{margin-bottom: 4%;font-size: 4.8rem;}
#item-area2 h2,#item-area3 h2,#item-area4 h2,#item-area5 h2{margin-bottom: 8%;font-size: 4.8rem;}
#item-area1{margin-bottom: 14%;}
#item-area2{margin-bottom: 20%;}
#item-area3{margin-bottom: 20%;}
#item-area4{margin-bottom: 20%;}
#item-area5{margin-bottom: 20%;}

#item-area1 .ttl{position: absolute;top: 4%;left: 9%;}
#item-area1 .item-box.box1{margin-bottom: 10%;}
.img-item2{margin: 0 auto 4%; width: 91%;}
#item-area2 .txt-area.txt-box1{margin-bottom: 14%;}
#item-area2 .txt-area.txt-box2{margin-bottom: 15%;}

/*----------------------------------------------------
SP
----------------------------------------------------*/
@media screen and (max-width: 767px) {

/* FS ------------------------*/

/* 領域100％時に使用 ------------------------*/
.fs-l-main {
    padding-left:0;
    padding-right: 0;
    }

/*---------
アニメーション
------------------------------*/
.txt_ul_left:before{height: 1px;}

.title .catch{font-size: 1.4rem;}
.title h2{margin-left: 6%;font-size: 3rem;letter-spacing: 8px;line-height: 0.9;}
.title span{display:block;margin-left: 0;margin-top:3%; font-size: 1.4rem;letter-spacing: 3px;}

.txt{font-size: 1.3rem;letter-spacing: 0;line-height: 2;width: 100%;}

/* .group-nav {font-size: 1rem;} */
.group-nav li{font-size: 1.4rem;}
/* .group-nav ul {width: 44%;} */
.group-nav a {border-bottom: 1px solid #3c3c3c;}

#item-area1 h2,#item-area2 h2,#item-area3 h2,#item-area4 h2,#item-area5 h2{font-size: 1.8rem;}

.ttl-no{font-size: 3.4rem;}
.ttl-no span{font-size: 2.2rem;}
.txt-area h3{font-size: 1.8rem;}
}