@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300&display=swap');
@font-face {
	font-family: 'SourceHanSansJP-Regular';
	src: url('../font/SourceHanSansJP-Regular.woff') format('woff');
}
/* main-visual
------------------------------------------------------ */
.main-visual {
	background-size: cover;
	background-position: bottom;
	height: 85vh;
    position: relative;
}
.top-main-txt {
	max-width: 1080px;
	color: #fff;
	margin: 0 auto;
	padding-top: 13%;
	animation: fadeIn 4s ease 0s 1 normal;
	-webkit-animation: fadeIn 4s ease 0s 1 normal;
}
.top-main-ttl {
	font-size: 5rem;
	width: 50%;
	margin-left: auto;
	text-align: right;
	line-height: normal;
	font-family: 'Cormorant Infant', serif;
	color: #fff;
}
.top-main-subttl {
	margin-left: auto;
	color: #fff;
}
.main-visual video,.main-visual iframe {
	width: 100%;
	position: absolute;
	z-index: -1;
    bottom: 0;
}

/*PC Layout
===================================*/
@media all and (min-width: 769px) {
	.main-visual{
		margin-top: 80px;
	}
	.main-visual video,.main-visual iframe{
		top: 0;
		bottom: auto;
		object-fit: cover;
    height: 100%;
		 height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
	}
.top-main-subttl {
	width: 49%;
	font-size: 1.6rem;
}
.top-main-txt {
	width: 90%;
}
/*スクロールダウン全体の場所*/
.scrolldown1 {
	/*描画位置※位置は適宜調整してください*/
	position: absolute;
	left: 50%;
	top: 38px;
	/*全体の高さ*/
	height: 50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span {
	/*描画位置*/
	position: absolute;
	left: -15px;
	top: -15px;
	/*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after {
	content: "";
	/*描画位置*/
	position: absolute;
	top: 0;
	/*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity: 0;
}
    .top-main-ttl,.top-main-subttl{
        width: 55%;
        text-align: left;
    }
    .top-main-txt{
        padding-top: 20%;
	}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
 0% {
 height:0;
 top:0;
 opacity: 0;
}
 30% {
 height:30px;
 opacity: 1;
}
 100% {
 height:0;
 top:50px;
 opacity: 0;
}
}
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
.main-visual {
	height: 60vh;
}
.main-visual {
	background-size: cover;
	height: 75vh;
	background-position: bottom;
	position: relative;
}
.top-main-txt {
	padding-top: 30%;
}
h3, h3 span {
	text-align: left;
}
.main-line-btn {
	width: 20%;
	display: block;
	max-width: 80px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}
h3 {
	margin-bottom: 10px;
    margin-top: 30px;
}
    body,html {
    overflow-x: hidden;
}
    
}
/*.top-main-ttl {
	font-size: 4rem;
	text-align: left;
	line-height: 4rem;
	margin-left: 30px;
	letter-spacing: .2rem;
	width: 90%;
	margin: 0 auto;
}
.top-main-subttl {
	width: 90%;
	margin: 0 auto;
}*/
/* calender
------------------------------------------------------ */
.calender-bg {
	background: #F5F5F3;
	padding: 60px 0 20px;
}
.calender-area {
	margin: 0 auto;
	background: #fff;
	padding-bottom: 30px;
	position: relative;
}
#booking-package {
	max-width: 400px;
	margin: 0 auto!important;
}
p.calender-ttl {
	background: #1E3C43;
	color: #fff;
	text-align: center;
	padding: 16px 0 20px;
	margin: 0 auto;
	font-size: 1.6rem;
}
.calender-subttl {
	text-align: center;
	margin: 30px auto 10px;
	font-size: 1.6rem;
}
.availability-wrap {
	display: flex;
	max-width: 400px;
	margin: 0 auto;
}
.calender-link {
	background: #1E3C43;
	color: #fff;
	display: block;
	max-width: 360px;
	margin: 20px auto;
	text-align: center;
	padding: 10px 0;
	font-size: 1.8rem;
}
.availability-item:first-child {
	margin-right: 16px;
}
.availability-item:first-child:before {
	content: '';
	background: #fff;
	border: 1px solid #D6D6D6;
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.availability-item:last-child:before {
	content: '';
	background: #D6D6D6;
	border: 1px solid #D6D6D6;
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}
.calender-area iframe {
	height: 460px;
	width: 90%;
	margin: 0 auto;
	display: block;
	margin: 0 auto;
}
.calender-area:nth-child(2) p.calender-ttl, .calender02 p.calender-ttl {
	background: #938038;
}
.calender-area:nth-child(2) .calender-subttl, .calender02 .calender-subttl {
	color: #938038;
}
.calender-area:nth-child(2) .calender-link, .calender02 .calender-link {
	background: #938038;
}
.calender-area:nth-child(1) p.calender-ttl:before {
	content: '';
	background: url(/anc83/top/images/to-calender-icon01.png) no-repeat;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background-size: contain;
	vertical-align: middle;
}
.calender-area:nth-child(2) p.calender-ttl:before {
	content: '';
	background: url(/anc83/top/images/to-calender-icon02.png) no-repeat;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background-size: contain;
	vertical-align: middle;
}
.calendarData {
	font-size: 1.2rem;
}
.calender-btn-wrap {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 23px auto;
}
.calender-btn-wrap input[type="button"]{
    text-align: center;
    color: #938038;
    border: 1px solid #938038;
    width: 48%;
    cursor: pointer;
    padding: 6px 0;
    border: none;
    margin-bottom: 0;
}

.calender-btn-wrap input[type="button"].active{
    background: #938038;
    color: #fff;
}

/*SP Layout
===================================*/

@media print, screen and (max-width: 768px) {
.availability-wrap, .calender-link {
	width: 90%;
}
.calender-area iframe {
	height: 460px;
}
.tab-group {
	display: flex;
	justify-content: center;
}
.panel {
	display: none;
}
.panel.is-show {
	display: block;
}
li.tab.tab-A {
	background: #1E3C43;
	color: #fff;
	text-align: center;
	padding: 16px 0;
	margin: 0 auto;
	font-size: 1.3rem;
	width: 50%;
	line-height: 1.3rem;
	text-align: center;
}
li.tab.tab-A:before {
	content: '';
	background: url(/anc83/top/images/to-calender-icon01.png) no-repeat;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background-size: contain;
	vertical-align: middle;
	margin-bottom: -10px;
}
li.tab.tab-B {
	background: #938038;
	color: #fff;
	text-align: center;
	padding: 16px 0;
	margin: 0 auto;
	font-size: 1.3rem;
	width: 50%;
	line-height: 1.3rem;
	text-align: center;
	padding-top: 24px;
}
li.tab.tab-B:before {
	content: '';
	background: url(/anc83/top/images/to-calender-icon02.png) no-repeat;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background-size: contain;
	vertical-align: middle;
}
.calender-subttl {
	margin-top: 0;
	padding-top: 30px;
}
h3 {
	margin-bottom: 10px;
    margin-top: 94px;
}
}

/*PC Layout
===================================*/

@media print, screen and (min-width: 769px) {
.calender {
	display: flex;
	justify-content: space-between;
	max-width: 900px;
	margin-top: -180px;
}
.calender-area {
	width: 48%;
}
}
/* news
------------------------------------------------------ */
.news {
	margin: 0 auto;
	max-width: 800px;
}
.news-ttl, .news-lead {
	color: #938038;
}
.news-ttl {
	margin-right: 20px;
}
.topics-list li {
	border-bottom: 1px solid #f0f0f0;
}
.topics-list li a {
	display: flex;
	padding: 30px 0 8px;
}
.topics-cat {
	background: #938038;
	color: #fff;
	padding: 0 10px;
	width: 100px;
	text-align: center;
	margin: 0 10px;
}
.topics-view-all {
	background: #938038;
	border: 1px solid #938038;
}
.btn.topics-view-all:hover span {
	color: #938038;
}
/*== 背景が流れる（斜め） */
.bgskew.topics-view-all::before {
	background: #fff;
}
.news-lead {
	font-family: 'SourceHanSansJP-Regular';
}
.topics-date, .topics-ttl {
	font-family: 'SourceHanSansJP-Regular';
}
.news-ttl span {
	text-align: left;
	color: #938038;
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
.news-ttl-wrap {
	display: flex;
	align-items: top;
}
.news-bg {
	padding: 100px 0;
}
}

/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
.topics-list li a {
	flex-wrap: wrap;
}
.topics-ttl {
	line-height: 1.6rem;
	margin-top: 10px;
}
.topics-view-all,.rentalboat-availability{
	margin-bottom: 94px;
	}
}
/* licenseschool
------------------------------------------------------ */
.licenseschool-bg {
	background: linear-gradient(90deg, #F5F5F3 0%, #F5F5F3 50%, #fff 50%, #fff 100%);
	padding: 60px 0 30px;
}
.licenseschool {
	max-width: 980px;
}
.licenseschool-wrap {
	margin: 0 auto;
}
.licenseschool-item {
	margin-bottom: 40px;
}
.licenseschool-item:nth-child(3) {
	width: 100%;
	margin-bottom: 0;
}
.licenseschool-name {
	color: #1E3C43;
	text-align: center;
}
.licenseschool-img {
	margin-bottom: 20px;
}
.licenseschool-lead {
	font-family: 'SourceHanSansJP-Regular';
}
.licenseschool-reserved {
	background: #1E3C43;
	border: 1px solid #1E3C43;
}
.btn.licenseschool-reserved:hover span {
	color: #1E3C43;
}
/*== 背景が流れる（斜め） */
.bgskew.licenseschool-reserved::before {
	background: #fff;
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
.licenseschool-ttl-wrap {
	display: flex;
}
.licenseschool-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.licenseschool-item {
	width: 48%;
}
.licenseschool-ttl {
	margin-right: 200px;
}
.licenseschool-wrap {
	width: 80%;
}
.licenseschool {
	margin-bottom: 140px;
}
.licenseschool-ttl span {
	text-align: left;
}
}

/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
.licenseschool-bg {
	background: #F5F5F3;
	padding: 10px 0;
}
.licenseschool-lead, .rentalboat-lead ,.blog-lead {
	margin-bottom: 30px;
	line-height: 1.6rem;
}
    .licenseschool-img,.licenseschool-item {
    margin-bottom: 10px;
}
}
/* rentalboat
------------------------------------------------------ */
.rentalboat-bg {
	background: linear-gradient(90deg, #F5F5F3 0%, #F5F5F3 50%, #fff 50%, #fff 100%);
	padding: 10px 0 30px;
}
.rentalboat {
	max-width: 980px;
}
.rentalboat-ttl, .rentalboat-lead {
	color: #938038;
}
.rentalboat-lead {
	font-family: 'SourceHanSansJP-Regular';
	
}
.rentalboat-name {
	text-align: center;
	color: #938038;
}
.rentalboat-availability {
	background: #938038;
	border: 1px solid #938038;
}
.btn.rentalboat-availability:hover span {
	color: #938038;
}
/*== 背景が流れる（斜め） */
.bgskew.rentalboat-availability::before {
	background: #fff;
}
.rentalboat-ttl span {
	color: #938038;
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
.rentalboat-wrap {
	display: flex;
	justify-content: center;
}
.rentalboat-item {
	width: 32.5%;
    margin: 10px;
}
.rentalboat-ttl-wrap {
	display: flex;
}
.rentalboat-ttl-wrap {
	display: flex;
}
.rentalboat {
	margin-bottom: 100px;
}
.rentalboat-ttl {
	margin-right: 260px;
}
.rentalboat-ttl span {
	text-align: left;
}
}

/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
.rentalboat-name {
	margin-bottom: 10px;
}
.rentalboat-img {
	margin-bottom: 10px;
}
}
/* boatsale
------------------------------------------------------ */
.boatsale-bg {
	background: #34454A;
	padding: 60px 0;
}
.boatsale-ttl {
	color: #fff;
	text-align: center;
}
.boatsale-ttl span {
	color: #fff;
}
.boatsale {
	max-width: 800px;
}
.boatsale-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 40px;
	position: relative;
	z-index: 1;
}
.boatsale-item {
	color: #fff;
}
.boatsale-img {
	margin-bottom: 18px;
}
.boatsale-feature {
	display: flex;
}
.boatsale-product-name {
	font-size: 1.8rem;
    margin-bottom: 10px;
}
.boatsale-feature li {
	border: 1px solid #fff;
	margin-right: 6px;
	padding: 0 6px;
	font-family: 'SourceHanSansJP-Regular';
}
.boatsale-product-explanation {
	margin-bottom: 10px;
}
.boatsale-detail {
	background: #938038;
	max-width: 320px;
	border: 1px solid #938038;
}
.btn.boatsale-detail:hover span {
	color: #938038;
}
/*== 背景が流れる（斜め） */
.bgskew.boatsale-detail::before {
	background: #fff;
}
.boatsale-bg {
	position: relative;
}
.boatsale-bg-txt {
	color: rgba(255,255,255,0.17);
	font-size: 10rem;
	line-height: normal;
	position: absolute;
	bottom: -24px;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	font-family: 'Cormorant Infant', serif;
}
.boatsale-product-name, .boatsale-product-explanation, .boatsale-feature li {
	color: #fff;
}
.not-used {
    width: 100%!important;
    margin: 40px auto;
}
.not-used p {
    text-align: center;
    color: #fff;
}

/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
.boatsale-wrap {
	display: flex;
	margin-top: 0;
}
.boatsale-item {
	margin: 20px;
}
.boatsale-ttl {
	text-align: left;
}
.sp-contact-btn-bg {
	background: #F5F5F3;
	padding: 10px 0;
}
.rentalboat-availability.spElement {
	margin: 0 auto;
	max-width: 85%;
}
.calender-bg {
	padding-top: 0;
}
.panel-group {
	width: 90%;
	margin: 20px auto;
}
    .boatsale-bg{
        padding: 30px 0;
    }
    .boatsale .slick-prev,.boatsale .slick-next{
        display: none!important;
    }
    .boatsale-bg-txt{
        font-size: 3.4rem;
        bottom: 0;
    }
    .boatsale-product-explanation{
        line-height: 2rem;
    }
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
.boatsale-item {
	width: 48%;
	color: #fff;
}
    .not-used p {
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
}
}
/* blog
------------------------------------------------------ */

.blog-bg {
	background: #F5F5F3;
	padding: 100px 0;
}
.blog {
	max-width: 800px;
}
.blog-slider {
	display: flex;
	justify-content: space-between;
}
.blog-slider-item {
	width: 29%;
	background: #fff;
	padding: 14px;
	margin: 5px;
}
.blog-slider-img {
	margin-bottom: 50px;
}
.blog-item-ttl {
	margin-bottom: 10px;
	font-size: 1.6rem;
}
.blog-item-txt {
	margin-bottom: 30px;
}
.blog-lead {
	font-family: 'SourceHanSansJP-Regular';
}
.blog-item-txt {
	font-family: 'SourceHanSansJP-Regular';
}
.blog-slider .slick-arrow:before {
	content: ""!important;
}
.blog-slider .slick-arrow:before {
	content: ""!important;
	width: 100%!important;
	height: 100%!important;
	position: absolute;
	top: 0;
	left: 0;
}
.blog-slider .slick-next:before {
	background: url(images/top-blog-next-icon.png)!important;
	background-size: contain!important;
}
.blog-slider .slick-prev:before {
	background: url(images/top-blog-prev-icon.png)!important;
	background-size: contain!important;
}
.blog-slider .slick-arrow:before {
	opacity: 1!important;
}
.blog-slider .slick-arrow {
	z-index: 2!important;
	width: 45px!important;
	height: 45px!important;
}
.blog-slider .slick-next {
	right: 50px!important;
	top: -80px;
}
.blog-slider .slick-prev {
	left: 650px!important;
	top: -80px;
}
.blog-ttl span {
	text-align: left;
}
    .blog-item-txt p {
    font-family: 'SourceHanSansJP-Regular';
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
.blog-ttl {
	margin-right: 30px;
}
.blog-ttl-wrap {
	display: flex;
}
}

/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
.blog-bg {
	padding: 20px 0;
}
.blog-slider-item {
	margin: 10px;
}
.blog-lead {
	margin-bottom: 20px;
}
    .blog-item-txt p {
    line-height: 2rem;
    font-size: 1.4rem;
}
    
}
/* sns
------------------------------------------------------ */
.sns-bg {
	padding: 100px 0;
}

.line-bnr {
	width: 90%;
	max-width: 600px;
	margin: 60px auto;
	display: block;
}
.insta_ttl,.fb_ttl{
    text-align: center;
    font-size: 2rem;
}
.insta_bg{
    background: #F5F5F3;
}
.insta_bg,.fb_bg{
    padding: 30px 0;
}
.insta_list li {
    width: 30%;
}
.insta_list,.fb_list {
    width: 70%;
    margin: 30px auto;
}
.fb_list{
    text-align: center;
}
.insta_ttl:before{
    content: '';
    background: url(images/top-ig-icon.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 10px;
}
.fb_ttl:before{
    content: '';
    background: url(images/to-fb-icon.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 10px;
}
.insta_list {
    display: flex;
    justify-content: space-between;
}
.insta_list img{
    width: 160px;
    height: 160px;
    object-fit: cover;
    max-width: 160px;
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
.insta_bg,.fb_bg{
    width: 50%;
}
.sns_wrap {
	display: flex;
}

}


/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
    .insta_list, .fb_list{
        width: 90%;
    }

}


/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
.sp-fix-bg {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
}
    .fix-btn{
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
    }
    .fix-btn li:first-child a{
    background: #1E3C43;
    color: #fff;
    text-align: center;
    padding: 16px 0;
    margin: 0 auto;
    font-size: 1.3rem;
    width: 100%;
    line-height: 1.3rem;
    text-align: center;
        display: block;
        height: 100%;
        
    }
    .fix-btn li{
        width: 50%;
    }
    .fix-btn li:first-child a:before{
    content: '';
    background: url(/anc83/top/images/to-calender-icon01.png) no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-size: contain;
    vertical-align: middle;
    margin-bottom: -10px;
    }
    
    .fix-btn li:last-child a{
     background: #938038;
    color: #fff;
    text-align: center;
    padding: 16px 0;
    margin: 0 auto;
    font-size: 1.3rem;
    width: 100%;
    line-height: 1.3rem;
    text-align: center;
    padding-top: 24px;   
        display: block;
        height: 100%;
    }
    .fix-btn li:last-child a:before{
    content: '';
    background: url(/anc83/top/images/to-calender-icon02.png) no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-size: contain;
    vertical-align: middle;
    margin-bottom: -10px;
    }
}