@charset "utf-8";
/* Author: toyoshima */
.section1 .top-visual{padding: 0 5rem; margin-top:20rem; justify-content: center; align-items: center; display: flex; margin-bottom: 8.4rem;}
/* .section1 .top-visual img:first-of-type{width: 40.66%; margin-right: 1.1%;}
.section1 .top-visual img:last-of-type{width: 58.24%;} */

@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
    .section1 .top-visual{padding:0; position: relative; margin-top: 24px; margin-bottom: 30px;}
    /* .section1 .top-visual img:first-of-type {width: 38%; margin-right: 2%;}
    .section1 .top-visual img:last-of-type{width:55%} */
}

.section1 .text-wrap{padding: 0 12rem; margin-bottom: 12rem; display: flex; justify-content: center; align-items: flex-start;}
.section1 .text-wrap .p-1{width: 56.4rem; margin-right: 4.6rem; font-size: 4.2rem; letter-spacing: .1em; font-weight: 500; line-height: 1.8; font-family: 'Zen Maru Gothic'; white-space: nowrap; color: #222;}
.section1 .text-wrap .p-1 span{color: #53B897; font-weight: 700; line-height: 1.4;}
.section1 .text-wrap .p-1 span:first-of-type strong{font-size: 6.2rem;}
.section1 .text-wrap .p-1 span:last-of-type strong{font-size: 6.4rem; line-height: 1;}
.section1 .text-wrap .p-2{font-size: 1.8rem; letter-spacing: 0; line-height:2; font-weight: 500; width:59rem; margin-top: 3rem; color: #222;}

@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
    .section1 .text-wrap{display: block; padding: 0 10px; margin-bottom: 60px;}
    .section1 .text-wrap .p-1{font-size: 18px; margin-right: 0; width: 100%;}
    .section1 .text-wrap .p-1 span{font-size: 3.2rem;}
    .section1 .text-wrap .p-1 span:first-of-type strong{font-size: 4.2rem;}
    .section1 .text-wrap .p-1 span:last-of-type strong{font-size: 4.2rem;}

    .section1 .text-wrap .p-1 strong{font-size: 42px;}
    .section1 .text-wrap .p-2{white-space: normal; width:100%; margin-top: 20px; font-size: 18px;}
}

@media screen and (max-width: 844px) and (orientation:landscape) {
    .section1 .top-visual{margin-bottom: 60px;}
    .section1 .text-wrap{display: flex;}
    .section1 .text-wrap .p-1{width:50%;}
    .section1 .text-wrap .p-2{width:50%; margin-top: 0;}
}


.section2{width: 182rem; margin: auto; margin-bottom: 14rem;}
.section2 .content{background: url(../images/top/section2bg@2x.png) no-repeat top center/contain; display: flex; justify-content: center; align-items: flex-start; padding:10rem 7rem 0}
.section2 .content .item{width:50rem; margin: 0 3rem; font-family: 'Zen Maru Gothic'; transition: .6s;}
.section2 .content .item:hover{transform: translateY(-20px); opacity: .7;}
.section2 .content .item p{font-size: 2.4rem; font-weight: 500; letter-spacing: .05em; line-height: 1.4; margin-bottom: 1rem; display: flex; align-items: center;}
.section2 .content .item p strong{font-size: 4.2rem; font-weight: 500; letter-spacing: .05em; line-height: 1.54; margin-right: 1rem;}
.section2 .content .item p::after{content:""; display: inline-block; border-left: 1.2rem solid #53B897; border-top: .8rem solid transparent; border-bottom: .8rem solid transparent; margin-left: 2rem;}
.section2 .content .item ul{display: flex; flex-wrap:wrap; align-items: center; justify-content: flex-start; margin-bottom: 2rem;}
.section2 .content .item ul li{font-size: 1.7rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.section2 .content .item ul li::after{content:"｜"; display: inline-block; margin: 0 .3rem;}
.section2 .content .item ul li:last-of-type::after{content:none;}
.section2 .content .item:nth-of-type(1) ul::after{content: "...etc"; font-size: 1.5rem; letter-spacing: 0; line-height: 1.59; font-weight: 500; margin-left: .3rem;}
.section2 .content .item:nth-of-type(2){margin-top: 10.5rem;}
.section2 .content .item:nth-of-type(3){margin-top: 21rem;}

@media screen and (max-width:1440px){
    .section2{width: calc(100% - 4rem);}
    .section2 .content{padding: 10rem 3rem 0;}
    .section2 .content .item p{font-size: 1.8rem;}
    .section2 .content .item p strong{font-size: 3.2rem;}
    .section2 .content .item ul li{font-size: 1.2rem;}
}

@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
    .section2{width:calc(100% - 20px); margin: auto; margin-bottom: 30px;}
    .section2 .content{display: block; padding: 0; background: #e5e1dd; border-radius: 5px; padding: 20px 10px;}
    .section2 .content .item{width: 100%; margin: 0;}
    .section2 .content .item p{font-size: 16px;}
    .section2 .content .item p strong{font-size: 22px;}
    .section2 .content .item ul{flex-wrap:wrap; margin-bottom: 10px;}
    .section2 .content .item:nth-of-type(2),
    .section2 .content .item:nth-of-type(3){margin-top: 30px;}
    .section2 .content .item:hover{transform: translateY(0); opacity: 1;}
}

@media screen and (max-width: 844px) and (orientation:landscape) {
    .section2 .content{display: flex; justify-content: space-between;}
    .section2 .content .item { width: 32%; margin: 0;}
    .section2 .content .item ul{height: 60px;}
    .section2 .content .item:nth-of-type(2), .section2 .content .item:nth-of-type(3){margin-top: 0;}
    .section2 .content .item p{font-size: 12px;}
    .section2 .content .item p strong{font-size: 16px; margin-right: 5px;}
    .section2 .content .item p::after{margin-left: 5px; border-left: .8rem solid #53B897; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent;}
}


.section3 .icon-wrap{display: flex; justify-content: center; align-items: flex-start; margin-bottom: 14rem;}
.section3 .icon-wrap .item{width: 19.8%; padding-right:2.6%; margin-right: 2.6%; position:relative; box-sizing: content-box;}
.section3 .icon-wrap .item::after{position: absolute; right: 0; content: ""; display: inline-block; width: 2px; height: 15rem; background: url(../images/top/icon-border.png) repeat-y; top: 0;}
.section3 .icon-wrap .item:last-of-type{margin-right: 0; padding-right:0;}
.section3 .icon-wrap .item:last-of-type:after{content: none;}
.section3 .icon-wrap .item .img-box{width:12rem; margin: 0 auto 1rem;}
.section3 .icon-wrap .item .img-box img{width:100%;}
.section3 .icon-wrap .item a{display: block;}
.section3 .icon-wrap .item p{font-size: 1.8rem; font-weight: 700; letter-spacing: .1em; line-height: 1.278; text-align: center;}
@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
    .section3 .icon-wrap{margin-bottom: 60px;}
    .section3 .icon-wrap{flex-wrap:wrap;}
    .section3 .icon-wrap .item{margin-right: 0; padding-right:0; width:50%; margin-bottom: 20px;}
    .section3 .icon-wrap .item::after{content:none;}
    .section3 .icon-wrap .item p{font-size: 16px;}
}

@media screen and (max-width: 844px) and (orientation:landscape) {
    .section3 .icon-wrap .item{width:22%;}
}



.section4{margin-bottom: 13.3rem;}
.section4 h2{font-size: 2.8rem; letter-spacing: .05em; line-height:1.4; font-weight: 700; font-family: "Zen Maru Gothic"; text-align: center; margin-bottom: 4rem;}
.section4 h2 small{font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.4; color: #53B897; display: block;}
.section4 .news-wrap{max-width: 120rem; display: flex; flex-wrap:wrap; justify-content: center; align-items: flex-start; margin:auto; margin-bottom: 3.3rem;}
.section4 .news-wrap .item{width:28.5rem; margin-right: 2rem; margin-bottom: 2rem;}
.section4 .news-wrap .item:hover{opacity: .7;}
.section4 .news-wrap .item:nth-of-type(4n){margin-right: 0;}
.section4 .news-wrap .item .img-box{border-radius: 1rem; margin-bottom: .8rem; overflow: hidden;}
.section4 .news-wrap .item .p-1{display: flex; justify-content: space-between; align-items: center; font-family: "Zen Maru Gothic"; margin-bottom: 1rem;}
.section4 .news-wrap .item .p-1 .date{font-size: 1.8rem; letter-spacing: .05em; line-height: 1.71; font-weight: 700; color:#666666;}
.section4 .news-wrap .item .p-1 .cate{width: 10rem; background: #F0ECE8; text-align: center; font-size: 1.4rem; font-weight: 500; line-height:1.4; letter-spacing: 0;}
.section4 .news-wrap .item .p-2{font-size: 1.6rem; font-weight: 500; line-height: 1.6;}
.section4 .index-btn{width: 100%; text-align: center;}
.section4 .index-btn a{border: 2px solid #53B897; border-radius: 5px; text-align: center; color: #0A7A55; padding: 1.5rem 2.8rem 1.5rem 2rem; font-size: 1.6rem; letter-spacing: .05em; line-height: 1.4; font-weight: 500; font-family: "Zen Maru Gothic"; position: relative; min-width: 24rem; display: inline-block;}
.section4 .index-btn a::after{content:""; display: inline-block; border-left: .8rem solid #0A7A55; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; position: absolute; right: 2rem; top: 50%; transform:translateY(-50%);}
@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
    .section4{margin-bottom: 60px;}
    .section4 h2{margin-bottom: 20px;}
    .section4 .news-wrap{padding: 0 10px; justify-content: space-between;}
    .section4 .news-wrap .item{width:48%; margin-bottom: 30px; margin-right: 0;}
    .section4 .news-wrap .item .p-1{flex-wrap:wrap;}
}

@media screen and (max-width: 844px) and (orientation:landscape) {
    .section4 .news-wrap{display: flex; flex-wrap:wrap;}
    .section4 .news-wrap .item{width:49%; margin-right: 0;}
    .section4 .news-wrap .item:nth-of-type(2n){margin-left: 1%;}
}


/* 元のスタイルを修正 */
.section1 .text-wrap{
	padding: 0 12rem;
	margin-bottom: 12rem;
	display: flex;
	flex-direction: column; /* 縦積みに変更 */
	align-items: center;
}

/* p-1とp-2の横並びは .text-inner に */
.section1 .text-wrap .text-inner{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}

/* 画像はその下、幅を指定して原寸大表示を防ぐ */
.section1 .text-wrap .img-box{
	margin-top: 8rem;
	width: 100%;
	text-align: center;
}
.section1 .text-wrap .img-box img{
	width: 100rem;      /* デザインに合わせて調整してください */
	max-width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* スマホ：p-1/p-2 を縦積みにしている元のコード → text-inner に変更 */
@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
    .section1 .text-wrap .text-inner{display: block; padding: 0 10px;}
    .section1 .text-wrap .p-1{font-size: 18px; margin-right: 0; width: 100%;}
    /* ...以下同様... */
}

/* PC横向きタブレット：p-1/p2 を横並びにしている元のコード → text-inner に変更 */
@media screen and (max-width: 844px) and (orientation:landscape) {
    .section1 .text-wrap .text-inner{display: flex;}
    .section1 .text-wrap .p-1{width:50%;}
    .section1 .text-wrap .p-2{width:50%; margin-top: 0;}
}

@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
	.section1 .text-wrap .img-box{
		margin-top: 40px; /* こちらもお好みで調整 */
	}
}

@media screen and (max-width: 767px), (max-width: 844px) and (orientation:landscape) {
    .section1 .text-wrap{display: block; padding: 0 10px; margin-bottom: 60px;}
    .section1 .text-wrap .text-inner{display: block;}  /* ← これを追加 */
    .section1 .text-wrap .p-1{font-size: 18px; margin-right: 0; width: 100%;}
    .section1 .text-wrap .p-1 span{font-size: 3.2rem;}
    .section1 .text-wrap .p-1 span:first-of-type strong{font-size: 4.2rem;}
    .section1 .text-wrap .p-1 span:last-of-type strong{font-size: 4.2rem;}

    .section1 .text-wrap .p-1 strong{font-size: 42px;}
    .section1 .text-wrap .p-2{white-space: normal; width:100%; margin-top: 20px; font-size: 18px;}
}