@charset "utf-8";
/*
Theme Name: next-takasu
Author: SUDA Co., Ltd
Description: next-takasu original theme
*/

header {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background: #F4544C;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
/* ヒーローエリア */
.hero-slideshow {
    position: relative;
    width: 100%;
	top: 60px;
    overflow: hidden;
}
@media screen and (max-width: 920px) {
	.hero-slideshow {
		top: 0px;
	}
}
.hero-slideshow h1 {
	margin: 0;
	padding: 0;
}
/* スライド群 */
.slides {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1020;
}
@media screen and (max-width: 920px) {
	.slides {
		aspect-ratio: 750 / 920;
	}
}

/* 各画像 */
.slides img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;
    animation: fadeSlide 36s infinite;
}

/* 画像ごとの開始タイミング */
.slides img:nth-child(1) {
    animation-delay: 0s;
}

.slides img:nth-child(2) {
    animation-delay: 6s;
}

.slides img:nth-child(3) {
    animation-delay: 12s;
}

.slides img:nth-child(4) {
    animation-delay: 18s;
}

.slides img:nth-child(5) {
    animation-delay: 24s;
}

.slides img:nth-child(6) {
    animation-delay: 30s;
}

/* フェード切替 */
@keyframes fadeSlide {

    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* ロゴ画像 */
.hero-logo {
    position: absolute;
    inset: 0;

    z-index: 10;

    pointer-events: none;
}

.hero-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

/*メニュー*/
.sp {
	display: none;
}
nav {
	position: absolute;
	width: 100%;
	background: #F4544C;
	z-index: 800;
}
.nav-pc {
	display: flex;
	list-style: none;
	width: 100%;
	max-width: 680px;
	margin: 25px auto;
	padding: 0;
}
.nav-pc li {
	flex: 1 0 auto;
	font-size: 0.9em;
	text-align: center;
}
.nav-pc li + li {
	border-left: 1px solid #fff;
}
.nav-pc a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #fff;
	padding: 0;
}
.nav-pc a:hover {
	color: #000;
}
.fixed {
	position: fixed;
	top: 0;
}
.logo {
	position: absolute;
	top: 600px;
	left: 20%;
	opacity: 0;
}
.logo img {
	width: 100%;
	max-width: 50px;
}
.slideIn {
	top: 0px;
	width: 60px;
	height: 60px;
	overflow: hidden;
	opacity:0;
	animation-name: slideInAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes slideInAnime{
  from {
    opacity: 0;
  transform: translateY(-50px);
  }

  to {
    opacity: 1;
  transform: translateY(15px);
  }
}
@media screen and (max-width: 1300px) {
	.nav-pc {
		margin: 25px auto 25px auto;
	}
	.logo {
		left: 10%;
	}
}
@media screen and (max-width: 1000px) {
	.nav-pc {
		margin: 25px 10% 25px auto;
	}
	.logo {
		left: 10%;
	}
}
@media screen and (max-width: 920px) {
	.pc {
		display: none;
	}
	.logo {
		display: none;
	}
	.sp {
		display: block;
	}
	/*ハンバーガー*/
	.hamburger {
	  display : block;
	  position: fixed;
	  z-index : 53;
	  right : 13px;
	  top   : 10px;
	  width : 42px;
	  height: 42px;
	  cursor: pointer;
	  text-align: center;
	}
	.hamburger span {
	  display : block;
	  position: absolute;
	  width   : 30px;
	  height  : 2px ;
	  left    : 6px;
	  background : #fff;
	  -webkit-transition: 0.3s ease-in-out;
	  -moz-transition   : 0.3s ease-in-out;
	  transition        : 0.3s ease-in-out;
	}
	.hamburger span:nth-child(1) {
	  top: 10px;
	}
	.hamburger span:nth-child(2) {
	  top: 20px;
	}
	.hamburger span:nth-child(3) {
	  top: 30px;
	}

	/* ナビ開いてる時のボタン */
	.hamburger.active span:nth-child(1) {
	  top : 16px;
	  left: 6px;
	  -webkit-transform: rotate(-45deg);
	  -moz-transform   : rotate(-45deg);
	  transform        : rotate(-45deg);
		background-color: #515151;
	}

	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
	  top: 16px;
	  -webkit-transform: rotate(45deg);
	  -moz-transform   : rotate(45deg);
	  transform        : rotate(45deg);
		background-color: #515151;
	}

	#nav-sp {
	  position: fixed;
	  z-index : 52;
	  top  : 0;
	  left : 0;
		padding-top: 20px;
		padding-bottom: 20px;
	  color: #000;
	  background: #fff;
	  text-align: center;
	  transform: translateX(100%);
	  transition: all 0.6s;
	  width: 100%;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	#nav-sp ul {
	  background: #fff;
	  margin: 0 auto;
	  padding: 0;
	  width: 100%;
	}

	#nav-sp ul li {
	  list-style-type: none;
	  padding: 0;
	  width: 100%;
	  border-bottom: 1px solid #ccc;
	}
	#nav-sp ul li:last-child {
	  padding-bottom: 0;
	  border-bottom: none;
	}
	#nav-sp ul li:hover{
	  background-color :#e8a733;
	}

	#nav-sp ul li a {
	  display: block;
	  color: #000;
	  padding: 1em 0;
	  text-decoration :none;
	}

	/* このクラスを、jQueryで付与・削除する */
	#nav-sp.active {
	  transform: translateX(0%);
	}
	
	/*サイトロゴ*/
	.sp-menu-logo {
		text-align: center;
		padding: 0;
	}

	.sp-menu-logo img {
		max-width: 120px;
		width: 100%;
		height: auto;
	}
}
/* SNSアイコン */
@media screen and (max-width: 920px) {
.sns-flex {
	display: flex;
	height: 60px;
	align-items: center;
	justify-content: flex-end;
	margin-right: 60px;
}
.sns-icons {
	display: flex;
	position: relative;
}
.sns-icon-wrap {
	background: #fff;
	width: 48px;
	height: 48px;
	margin: 0 10px;
	border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
	display: flex;
	align-items: center;
    justify-content: center;
}
.sns-icons img {
	width: 29px;
	height: auto;
	display: block;
}
}

/*------------------------ヒーローイメージ以下-----------------------*/
#overview {
	position: relative;
	margin-top: 100px;
}
@media screen and (max-width: 920px) {
	#overview {
		margin-top: 20px;
	}
}
/*------------------------next-takasu紹介文-----------------------*/
.text-image-group > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.text-image-group figure {
	max-width: 100px;
}
@media screen and (max-width: 920px) {
    .text-image-group > .wp-block-group__inner-container {
        flex-direction: column;
		gap: 0;
    }
	.text-image-group > .wp-block-group__inner-container > p {
		margin: 0.1em;
	}
    .text-a {
        order: 1;
    }
    .text-b {
        order: 2;
    }
    .image-block {
        order: 3;
    }
}
/*------------------------鷹栖の位置-----------------------*/
.hokkaido-image-text > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 60px;
}
.hokkaido-image {
    flex: 0 0 45%;
	max-width: 196px;
}
.hokkaido-text {
    flex: 1;
}
.hokkaido-row > .wp-block-group__inner-container {
    display: flex;
    gap: 0;
}
.hokkaido-large-text {
    margin: 0;
    font-size: 3rem;
    line-height: 1.2;
}
.hokkaido-small-text {
    margin-top: 25px;
	border-left: 2px solid #f4544c;
    border-right: 2px solid #f4544c;

    padding: 10px 20px;
	background:
        linear-gradient(#f4544c,#f4544c) left top / 8px 2px no-repeat,
        linear-gradient(#f4544c,#f4544c) left bottom / 8px 2px no-repeat,
        linear-gradient(#f4544c,#f4544c) right top / 8px 2px no-repeat,
        linear-gradient(#f4544c,#f4544c) right bottom / 8px 2px no-repeat;
}
@media screen and (max-width: 920px) {
    .hokkaido-image-text > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
		gap: 0;
    }
    .hokkaido-image,
    .hokkaido-text {
        width: 100%;
    }
    .hokkaido-row > .wp-block-group__inner-container {
        display: contents;
    }
    .hokkaido-large-wrap > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
        gap: 0;
		text-align: center;
    }
	.hokkaido-large-text {
		font-size: 2rem;
	}
}
/*--------------------説明の大枠：新規---------------------*/
.content-gallery-text > .wp-block-group__inner-container ,
.content-gallery-text-reverse > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 40px;
}
.content-gallery-text h3 ,
.content-gallery-text-reverse h3 {
	font-size: 1.6em;
	font-weight: bold;
}
.content-gallery-top,
.content-gallery-bottom {
    flex: 0 0 25%;
}
.content-gallery-top img,
.content-gallery-bottom img {
    width: 100%;
    height: auto;
    display: block;
}
.content-gallery-bottom {
	max-width: 200px;
}
.content-gallery-textarea {
    flex: 1;
}
@media screen and (max-width: 920px) {
    .content-gallery-text > .wp-block-group__inner-container,
    .content-gallery-text-reverse > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 20px;
        align-items: start;
    }
    .content-gallery-top {
        grid-column: 1;
        grid-row: 1;
    }
    .content-gallery-bottom {
        grid-column: 1;
        grid-row: 2;
    }
    .content-gallery-textarea {
        grid-column: 2;
        grid-row: 1 / 3;
    }
	.content-gallery-bottom {
		max-width: 120px;
		margin: 0 auto;
	}
}



/*--------------------説明の大枠---------------------*/
#squad h2 {
	font-size: 35px;
    margin-bottom: 10px;
    margin-top: 10px;
}
@media screen and (max-width: 600px) {
	.squad-index-txt {
		text-align: left;
	}
}
#squad {
	top: 100px;
    padding-bottom: 50px;
}
.squad-cont {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 600px;
    margin-bottom: 2em;
}
.squad-cont h3 {
	width: 100%;
	max-width: 270px;
	font-size: 2.4em;
	font-weight: bold;
}
.squad-txt {
	width: 50%;
}
.squad-txt p {
	margin-bottom: 1.0em;
}
.squad-cont p {
	font-size: 0.9em;
}
.squad-cont-img {
    width: 50%;
    max-width: 260px;
    object-fit: cover;
}
.more {
	width: 65px;
	height: 23px;
	line-height: 18px;
	font-size: 0.8em;
	text-align: center;
	padding: 0;
}
.more a {
	margin: 0;
	padding: 0.3em;
	display: block;
    text-align: center;
    text-decoration: none;
}
.left {
	margin: 0 auto 0 0;
}
.right {
    margin: 0 0 0 auto;
}
/*-------------チャートの説明-------------*/
#chart {
	top: 100px;
	height: auto;
	padding-bottom: 40px;
	background-color: #e8a733;
}
#chart h2 {
	font-size: 2.4em;
	font-weight: bold;
	margin: 0.5em;
}
.chart-index {
	max-width: 245px;
	height: 40px;
	margin: 0 auto;
	background-color: #000;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	padding: 1.0em;
	line-height: 0.5em;
	border-radius: 20px;
}
.chart-triangle {
	width: 100%;
	text-align: center;
}
.chart-triangle svg {
	width: 200px;
	height: 40px;
	margin-bottom: 2.0em;
}
.chart-wrap {
	position: relative;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}
.chart-cont {
	width: 80%;
	max-width: 600px;
}
.chart-img {
	width: 10%;
	text-align: left;
}
.chart-img img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	max-width: 120px;
}
.chart-dummy {
	width: 10%;
	max-width: 120px;
}
/*チャートSTARTボタン*/
.start-btn-cont {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.start-btn {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 100%;
	max-width: 250px;
	height: 50px;
	border: solid 1px #e8a733;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #fff;
	transition: ease .2s;
}
.start-btn span {
	position: relative;
	z-index: 3;
}
.start-btn img {
	transform: translateY(25%);
}
.start-btn:hover span {
  color:#fff;
}
.bgcenterout-chart:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #e8a733;
  width: 100%;
  height: 100%;
  transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 0);
  transform-origin:center;
	border: solid 3px #000;
}
.bgcenterout-chart:hover:before{
  transform:scale(1, 1);
}
@media screen and (max-width: 600px) {
	#chart {
		top: 100px;
		height: auto;
		padding-bottom: 40px;
		background-color: #e8a733;
	}
	#chart h2 {
		text-align: left;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.chart-index {
		margin: 1.0em auto;
	}
	.chart-txt {
		text-align: left;
	}
	.chart-wrap {
		position: relative;
		width: 100%;
		display: block!important;
		margin: 0 auto;
		text-align: center;
	}
	.chart-cont {
		position: relative;
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}
	.chart-img {
		position: relative;
		width: 100%;
		text-align: center;
	}
	.chart-img img {
		position: static;
		top: 50%;
		transform: translateY(0);
		width: 100%;
		max-width: 120px;
	}
}
/*チャートここまで*/
/*スケジュール仮*/
.schedule-bg {
	padding: 2.0em;
	background-color: #FDF7EC;
}
.overallflow-img {
	max-width: 360px;
}
.step-area {
	display: table;
}
.step-cont {
	margin-bottom: 1.0em;
}
.step , .step-txt {
	display: table-cell;
	vertical-align: top;
}
.step-txt {
	padding-left: 1.0em;
}
.step-txt p {
	margin-top: 0;
}
.step img {
	max-width: 80px;
	min-width: 80px;
}
.step-stay {
	background-color: #1AACB5;
	color: #fff;
	padding: 0.5em!important;
}
@media screen and (max-width: 781px) {
	.overallflow-img {
		flex-basis: 100%!important;
		margin: 0 auto!important;
		text-align: center;
	}
}
/*オレンジ枠の中*/
.overall-schedule-area {
	border: solid 2px #F5A518;
	background-color: #fff;
	padding: 1.0em;
	margin-bottom: 2.0em;
}
.overall-schedule-index {
	max-width: 130px;
	min-width: 130px;
}
.overall-schedule-area h4 {
	margin: 0;
	max-height: 60px;
	padding: 0.5em;
	font-size: 1.0em;
	font-weight: bold;
	border: solid 2px #F5A518;
}
.overall-schedule-cont , .select-schedule-cont {
	display: table;
	margin-bottom: 1.0em;
}
.overall-schedule-index , .overall-schedule-txt , .select-schedule-index , .select-schedule-txt {
	display: table-cell;
	vertical-align: top;
}
.overall-schedule-txt , .select-schedule-txt {
	padding-left: 1.0em;
}
.overall-schedule-txt p , .select-schedule-txt p {
	margin: 0;
	line-height: 40px;
}
.deadline-area {
	border-left: solid 2px #000;
	padding-left: 0.5em;
}
.deadline-area p {
	line-height: 1.2em;
}
p.overall-schedule-note {
	line-height: 1.0em;
}
/*青枠の中*/
.select-schedule-area {
	border: solid 2px #65acb8;
	background-color: #fff;
	padding: 1.0em;
}
.select-schedule-index {
	max-width: 130px;
	min-width: 130px;
}
.select-schedule-area h4 {
	margin: 0;
	max-height: 60px;
	padding: 0.5em;
	font-size: 1.0em;
	font-weight: bold;
	border: solid 2px #65acb8;
}
@media screen and (max-width: 560px) {
	.step, .step-txt {
		display: block;
	}
	.step {
		text-align: center;
	}
	.step-txt {
		padding-left: 0;
	}
	.overall-schedule-cont , .select-schedule-cont , .overall-schedule-index , .select-schedule-index  {
		width: 100%;
	}
	.overall-schedule-index, .overall-schedule-txt, .select-schedule-index, .select-schedule-txt {
		display: block;
		margin: 0 auto;
		padding-left: 0;
	}
	.overall-schedule-index, .select-schedule-index {
		margin-bottom: 1.0em;
	}
	.overall-schedule-txt h5 {
		text-align: left!important;
	}
	.deadline-area {
		border-left: none;
		padding-left: 0;
	}
	.overall-schedule-txt p , .select-schedule-txt p {
	line-height: 1.0em;
}
}
/*-------------スケジュール-------------*/
#schedule {
	margin: 100px auto 50px auto;
}
#schedule h2 {
	color: #E8A733;
	padding-top: 50px;
	padding-bottom: 30px;
	font-size: 2.0em;
	letter-spacing: 0.2em;
	text-align: center;
}
.orange-index {
	text-decoration: underline;
	text-underline-offset: 0.5em;
	text-decoration-color: #000;
	line-height: 2.0em;
}
.schedule-wrap {
	width: 100%;
	height: auto;
	padding: 5%;
	background-color: #fdf7ec;
}
.schedule-wrap img {
	margin: 0 auto;
}
@media screen and (max-width: 760px) {
	.schedule-wrap img {
		width: 100%;
		margin-bottom: 2.0em;
	}
}
#schedule a {
	text-decoration: none;
	color:#1AACB5;
}
#schedule h5 {
	font-size: 1.0em;
	color: #000;
	text-align: center;
}
.word {
	text-decoration: none;
	color:#1AACB5;
}
/*スケジュールここまで*/
/*-------------問い合わせボタン-------------*/
.inquiry {
	margin: 2.0em auto;
	padding: 1.0em;
	border-radius: 10px;
	width: 80%;
	max-width: 640px;
	background-color: #ffe5c5;
	font-size: 1.1em;
	text-align: center;
}
.inquiry .wp-block-button__link {
	background-color: #F5A518!important;
}
@media screen and (max-width: 620px) {
	.inquiry {
		width: 90%;
		max-width: 90%;
	}
}
/*-------------SNS-------------*/
#sns {
	width: 100%;
	max-width: 806px;
	top: 15px;
	margin: 0 auto;
	text-align: center;
}
.sns-title-wrap {
	width: 50%;
	max-width: 375px;
	margin: 0 auto;
}
.sns-wrap{
	margin: 0 auto;
	max-width: 800px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.twitter_image {
	border: solid 1px #000;
}
/*Instagramの表記をなじませる*/
.sbi_feedtheme_header_text {
	color: #000;
}
.sbi_bio {
	text-align: left;
}
.sbi_follow_btn  a {
	background-color: #E8A733 !important;
}
@media screen and (max-width: 920px) {
	.sns-wrap{
		justify-content: space-around!important;
	}
}
.twi-wrap , .fb-wrap {
	width: 50%;
	max-width: 375px;
	min-width: 375px;
}
.twi-link , .fb-link {
	width: 100%;
	height: 500px;
}
.sns-title {
	margin-top: 65px;
	margin-bottom: 40px;
}
.instagram-area {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
}
/*-------------地図-------------*/
#map {
	width: 100%;
	margin: 60px auto;
}
#map .wp-block-group__inner-container {
	width: 100%;
	max-width: 960px;
	height: 300px;
	background-color: antiquewhite;
	text-align: center;
	margin: 0 auto;
}
#map iframe {
	width: 100%;
	height: 100%;
}
/*-----------------バナー-------------------*/
.top-banner-wrapper {
	width: 90%;
	max-width: 800px;
	margin: 2.0em auto;
}

@media screen and (max-width: 720px) {
	.top-banner-wrapper {
		flex-wrap: wrap!important;
	}
}