@charset "utf-8";
/* レイアウトのためのCSS */
/*=============================================*/
/*Common Base*/
/*=============================================*/

html {
    font-size: 62.5%;
}

body{
    font-family: 'Noto Serif JP', serif;
	color: #333;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}

#body-green {
    background:#35c290;
}

#body-green.appear{
    background:#fff;
}

*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a, b, dd, dt, li, p, span, td, th {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #333333;
}

h1, h2, h3, h4, h5, h6 {
    color: #333333;
}

/*=============================================*/
/*  layout  Base                        */
/*=============================================*/
.container {
    width: calc(100% - 30px);
    max-width: 1000px;
    margin: auto;
}

.section-container {
    width: calc(100% - 30px);
    max-width: 1400px;
    margin: auto;
}

/* fonts */
/* Frank Ruhi Libre */
.c-text-fr48 {
    font-family: 'Frank Ruhl Libre', 'Noto Serif JP', sans-serif, serif;
    font-size: 4.8rem;
}

@media screen and (max-width:768px) {
    .c-text-fr48 {
        font-size: 3.6rem;
    }
}

@media screen and (max-width:576px) {
    .c-text-fr48 {
        font-size: 3.0rem;
    }
}

.c-text-fr36 {
    font-family: 'Frank Ruhl Libre', 'Noto Serif JP', sans-serif, serif;
    font-size: 3.6rem;
    font-weight: 700;
}

@media screen and (max-width:768px) {
    .c-text-fr36 {
        font-size: 2.8rem;
    }
}

.c-text-fr28 {
    font-family: 'Frank Ruhl Libre', 'Noto Serif JP', sans-serif, serif;
    font-size: 2.8rem;
    font-weight: 700;
}

@media screen and (max-width:768px) {
    .c-text-fr28 {
        font-size: 2.0rem;
    }
}

.c-text-fr24 {
    font-family: 'Frank Ruhl Libre', 'Noto Serif JP', sans-serif, serif;
    font-size: 2.4rem;
}

@media screen and (max-width:768px) {
    .c-text-fr24 {
        font-size: 1.8rem;
    }
}

/* Noto Serif JP */
.c-text-ns48 {
    font-family: 'Noto Serif JP', sans-serif, serif;
    font-size: 4.8rem;
}

@media screen and (max-width:768px) {
    .c-text-ns48 {
        font-size: 3.6rem;
    }
}

.c-text-ns36 {
    font-family: 'Noto Serif JP', sans-serif, serif;
    font-size: 3.6rem;
}

@media screen and (max-width:768px) {
    .c-text-ns36 {
        font-size: 2.8rem;
    }
}

.c-text-ns32 {
    font-family: 'Noto Serif JP', sans-serif, serif;
    font-size: 3.2rem;
}

@media screen and (max-width:768px) {
    .c-text-ns32 {
        font-size: 2.8rem;
    }
}

@media screen and (max-width:576px) {
    .c-text-ns32 {
        font-size: 1.8rem;
    }
}

.c-text-ns28 {
    font-family: 'Noto Serif JP', sans-serif, serif;
    font-size: 2.8rem;
}

@media screen and (max-width:768px) {
    .c-text-ns28 {
        font-size: 2.4rem;
    }
}

@media screen and (max-width:576px) {
    .c-text-ns28 {
        font-size: 1.6rem;
    }
}

.c-text-ns24 {
    font-family: 'Noto Serif JP', sans-serif, serif;
    font-size: 2.4rem;
}

@media screen and (max-width:768px) {
    .c-text-ns24 {
        font-size: 2.0rem;
    }
}

@media screen and (max-width:576px) {
    .c-text-ns24 {
        font-size: 1.6rem;
    }
}

.c-text-ns18 {
    font-family: 'Noto Serif JP', sans-serif, serif;
    font-size: 1.8rem;
}

@media screen and (max-width:576px) {
    .c-text-ns18 {
        font-size: 1.2rem;
    }
}

/* image */
.c-image500 {
    width: 100%;
    max-width: 500px;
}

.c-image500:before {
    content: "";
    display: block;
    width: 100%;
    /* padding-top: 100%; */
}
.c-image440 {
    width: 100%;
    max-width: 440px;
}

.c-image440:before {
    content: "";
    display: block;
    width: 100%;
    /* padding-top: 100%; */
}

.c-image440-height {
    width: 100%;
    max-width: 440px;
    height: 300px
}

.c-image440-height:before {
    content: "";
    display: block;
    width: 100%;
    /* padding-top: 100%; */
}

.c-image-object-top {
    object-position: top;
}

/* title */
.c-title-head {
    color: #333;
    text-align: center;
}

.c-title-sub {
    color: #35c290;
    text-align: center;
}

.c-title-beside {
    display: flex;
    align-items: center;
}

.c-title-beside__head {
    padding: 15px;
    color: #333;
}

.c-bold {
    font-weight: 700;
}

@media screen and (max-width:768px) {
    .c-title-beside__head {
        padding: 10px;
    }
}

.c-title-beside__sub {
    padding: 15px;
    color: #35c290;
}

@media screen and (max-width:768px) {
    .c-title-beside__sub {
        padding: 10px;
    }
}

.c-title-head-left {
    color: #333;
    text-align: left;
}

.c-title-sub-left {
    color: #35c290;
    text-align: left;
}

.c-title-line {
    width: 6rem;
    margin-top: 10px;
    border-bottom: 3px solid #35c290;
}

.c-title-line-center {
    width: 6rem;
    border-bottom: 3px solid #35c290;
    margin: 10px auto 0;
}

.c-long-line {
    width: 100%;
    border-bottom: 5px solid #35c290;
    margin: 40px auto 0;
}

.c-long-line-black {
    width: 100%;
    border-bottom: 1px solid #333;
}

.c-mb40 {
    margin-bottom: 40px;
}

/* マテリアルアイコン */
.material-symbols-outlined {
    font-size: 180px;
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

@media screen and (max-width:768px) {
    .material-symbols-outlined {
        font-size: 60px;
    }
}

/* button */
.c-button-W {
    color: #35c290;
    height: 65px;
    width: 180px;
    padding: 17px 70px;
    background: #fff;
}

@media screen and (max-width:768px) {
    .c-button-W {
        padding: 15px 50px;
    }
}

/*== ボタン緑アニメーション */
.c-button-G{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    padding: 17px 70px;
    color: #fff;
    background: #35c290;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

@media screen and (max-width:768px) {
    .c-button-G {
        padding: 15px 50px;
    }
}

/*ボタン内spanの形状*/
.c-button-G span {
    position: relative;
    z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color:#fff;
}

.c-button-G:hover span{
    color:#333;
}

/*== 背景が流れる（左から右） */
.c-button-G-left:before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /*色や形状*/
    background:#fff;/*背景色*/
    border: 1px solid #555;/* ボーダーの色と太さ */
    width: 99%;
    height: 97%;
    /*アニメーション*/
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}

/*hoverした際の形状*/
.c-button-G-left:hover:before{
    transform-origin:left top;
    transform:scale(1, 1);
}

/*== ボタン矢印アニメーション */
/* ボタン共通設定 */
.c-button-W{
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    background:#fff;
    color:#35c290;
    padding: 17px 60px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
    height: 100%;
}

/* 矢印が右に移動 */

.c-button-W-arrow::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top:47%;
    right: 30px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

@media screen and (max-width:768px) {
    .c-button-W-arrow::after {
        top:43%;
    }
}

/*hoverした際の移動*/
.c-button-W-arrow:hover::after{
    right: 25px;
}

/*== 応募フォームボタン */
.contact__btn {
    color: #fff;
    background-color: #35c290;
    font-family: 'Noto Serif JP', sans-serif, serif;
    padding: 30px 20px;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    border-radius: 5px 0 0 5px;
    position: fixed;
    top:300px;
    right: 0;
    z-index: 800;
    transition: all .3s;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.contact__btn:hover {
    opacity: 0.8;
    transform: scale(1.02);
    transition: all .3s;
}

.contact__btn p {
    color: #fff;
}

@media screen and (max-width: 576px) {
    .contact__btn a {
        font-size: 1.2rem;
    }
}

/*=============================================*/
/*Common Base*/
/*=============================================*/

.p-section_topvisual img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}