@charset "utf-8";
/* CSS Document */

/* -----------------------------
　レスポンシブレイアウトの指示 
--------------------------------*/
@media (max-width: 1000px) { 　/* 1000pxまで */

	}

@media screen and (max-width:820px) { /*タブレット*/
	#head-wrap {
	justify-content: center;
 	}

@media screen and (max-width: 767px) { 

	#head-area {
	background: url(../images/undersail2026_hero_backimg.jpg) no-repeat center top;
	background-size: cover;
	}
	#head-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
	
	#head-wrap #text {
	margin-top: 1rem;
	}
	#text .detail {
	/*text-align: left;*/
	padding: 1rem;
	margin-top: 0;
	}
	#text .detail ul {
	display: block;
	}
	#text h3 {
	font-size: 1rem;
	margin-bottom: 2rem;
	line-height: 2rem;
	/*text-align:center;*/
	}
#photo_area #month_ph_wrap {
	/*background-color:#CCC;*/
	}
	ul.month_ph_main img {
	margin: 0 0 1em 0;
	}
	ul.month_ph_each {
	display: flex;
	flex-wrap:wrap;
	}
	.month_ph_each > li {
	flex-basis: calc( 98% / 3 );
	}
	
#photo_area {
	width: 100%; /*sm*/
	}
	
	
/*--- nav  ---*/  
#nav-wrap {
	border-radius: 4px;
	margin: 1em;
	/*background: #eee;*/
	}
	#nav .nav-btn li {
	display: block;
	}
	#nav .nav-btn .icon a {
	display: flex;
	justify-content: center;
	}
	#nav .nav-btn {
	justify-content: center; /*センター寄せ*/
	}

	#nav .subnav li {
	display: block;
	line-height: normal;
	}
	
/*--- content  ---*/  	
#cont-wrap {
	padding: 0;
	margin:0.5em;
	}
	#cont-area {
    display: block;
	}
	.story {
	border: 2px solid #FFF;
	margin: 0.5em;
	padding: 1em 0 1em;
	}
	.story-in .hl-icon {
	margin: 0 0 1em 0;
	display: block;
	text-align: center;
	font-size: 1em;
	}
	.linkbtn-box {
	border-radius: 4px;
	padding: 0.5em;
	margin-bottom: 1em;
	margin-right: auto;
	margin-left: auto;
	}
	.clum2 {
	display: block;	
	}
	.clum2 > li{
	width: 100%;
	}
	
  .pc { display:none !important; }
  .sp { display:inline !important; }
  
  .container {
  	width: 100%;
  	min-width: 100%;
 	margin: 50px auto;
 	height:auto;
	}
 } 

	
@media screen and (max-width: 480px) {　/* 480pxまで */
#head-wrap {
  flex-wrap: wrap-reverse;
	}
#head-wrap #text {
	/*flex: 1;*/
	/*margin: 1em;*/
    order: 1;　/*掲載順*/
	color: #FFF;
	text-align:left;
	}
#head-wrap #text {
    order: 2;　/*掲載順*/
	}	
#head-wrap #cover {
	order: 0;　/*掲載順*/
	}
	
#text img .pc { display: none !important; }
#text img .sp { display: block !important; }
	
#detail_area__in {	
	display:flex;
	flex-direction: column;
	gap:1rem;
	}
	
#text .reserve-icon {
	top:35%;
	font-size: .88rem;
	}
.container {
  	width: 100%;
  	min-width: 100%;
 	margin: 50px auto;
 	height:auto;
	}
.carousel__items {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  height: 300px;/* sm */
  position: relative;
	}
	
.arrow_box {
	/*margin: 0 0 2em 0 ;*/
	margin: 2rem -0.9rem;
	}
		
	}
	
@media screen and (max-width: 320px) { 
	ul.month_ph_each {
	height:800px; /*main cover img 高さに合わせる*/
	}
	
	.month_ph_each > li {
	flex-basis: calc( 98% / 2 );
 }