@charset "UTF-8";

/* 基本設定
================================================ */
h2 {
	border: 0;
	padding: 0;
	margin: 0;
}
h3 {
	border: 0;
	padding: 0;
	margin: 0;
}
ol,
ul {
	list-style: none;
}
.cof-wrap a {
	color: #000;
	text-decoration: none;
}
p {
  margin: 0;
  font-size: 14px;
}
.u-view-pc {
	display: none;
}
@media screen and (min-width: 767px) {
  p {
    font-size: 16px;
  }
	.u-view-sp {
		display: none !important;
	}
	.u-view-pc {
		display: block;
	}
}

iframe {
	max-width: 100%;
}

/* 共用クラス
================================================ */
.u-font-serif {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  letter-spacing: 0;
}
.u-font-bold {
  font-weight: 800;
}
.cof-u-inner {
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
@media screen and (min-width: 767px) {
	.cof-u-inner {
		max-width: 760px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
	}	
	.cof-u-inner.is-pc-wide {
		max-width: 960px;
	}
}

/* .l-main-img
================================================ */
.l-main-img {
	position: relative;
    height: auto;
    max-height: none;
    width: 100%;
    background: rgb(var(--color-grayscale-700));
		
}
@media screen and (max-width: 766px) {
	.l-main-img {
		margin-top: -39px;
    	padding-top: 39px;
	}
	.l-main-img__hero{
		aspect-ratio: 1 / 1;
		position: relative;
	}
	 .l-main-img__hero .mod-movie {
        position: relative;
        width: auto;
        /* max-width: 766px; */
        /* padding-top: 100%; */
        overflow: hidden;
        height: 100%;
        padding: 0;
        aspect-ratio: 16 / 9;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
		margin:0 auto 30px
    }
}
@media screen and (min-width: 767px) {	
	.l-main-img__hero .mod-movie {
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 56.25%;
		margin-top: 0;
		margin-bottom: 0;
	}
	.l-main-img__hero iframe {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* .cof-intro
================================================ */
.cof-intro {
	padding-top: 50px;
	padding-bottom: 30px;
}
.cof-intro__head {
    border-bottom: 0;
    font-size: 2rem;
    text-align: center;
	margin-bottom: 40px;
}
@media screen and (max-width: 766px) {
}
@media screen and (min-width: 767px) {
	.cof-intro {
		padding-top: 100px;
		padding-bottom: 90px;
	}
    .cof-intro__head {
        font-size: 3.4rem;
		margin-bottom: 98px;
    }
	.cof-intro__txt {
		font-size: 2.4rem;
		text-align: center;
	}
}

/* .cof-about
================================================ */
.cof-about__sec + .cof-about__sec {
	margin-top: 40px;
}
.cof-about__head {
	font-size: 1.8rem;
	border-left-color: #FF8F00;
	margin-bottom: 1em;
}
.cof-about__txt {
	margin-bottom: 1em;
}
.cof-about__img-list {
	display: flex;
	margin: 20px -3px 0;
	padding: 0;
}
.cof-about__img-item {
	width: calc(33.333% - 6px);
	margin: 0 3px 10px;
}
@media screen and (max-width: 766px) {
	.cof-about__wrap-img {
		text-align: center;
	}
}
@media screen and (min-width: 767px) {
	.cof-about__sec + .cof-about__sec {
		margin-top: 80px;
	}
	.cof-about__set {
		display: flex;
		flex-wrap: wrap;
	}
	.cof-about__area-txt {
		width: 50%;
	}
	.cof-about__head {
		font-size: 2.6rem;
	}
	.cof-about__wrap-img {
		max-width: 440px;
		margin-left: 30px;
	}

	.cof-about__set.is-reverse .cof-about__area-txt {
		order: 2;
	}
	.cof-about__set.is-reverse .cof-about__wrap-img {
		order: 1;
		margin-left: 0;
		margin-right: 30px;
	}

	.cof-about__img-list {
		margin-top: 48px;
		display: flex;
		flex-wrap: wrap;
		margin: 48px -15px 10px;
	}
	.cof-about__img-item {
		width: calc(33.333% - 30px);
		margin: 0 15px 10px;
	}
}

/* .cof-about-pla
================================================ */
.cof-about-pla {
	background: #F5EAEA;
	padding: 30px;	
	margin-top: 25px;
}

.cof-about-pla__head {
	font-weight: bold;
	margin-bottom: 2em;
}
.cof-about-pla__txt {
	margin-bottom: 1em;
}
@media screen and (max-width: 766px) {
	.cof-about-pla__img {
		margin-top: 25px;
		text-align: center;
	}
}
@media screen and (min-width: 767px) {
	.cof-about-pla {
		max-width: 760px;
		margin: 50px auto 0;
		padding: 40px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.cof-about-pla__area-txt {
		width: 60%;
	}	
	.cof-about-pla__img {
		width: 252px;
	}
}