@charset "UTF-8";


/*------------------------------トップページ------------------------------*/

.top_h {
	width: 100%;
	position: relative;
}
.top_h .head_box {
	width: 100%;
	margin: auto;
	position: relative;
	z-index: 10;
	overflow: hidden;
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.top_h {
		background-image: url("../image/awa01.svg");
		background-position: left -50px top -50px;
		background-size: 240px auto;
	}
	.top_h .head_box {
		width: 96%;
		margin: auto;
	}
}
@media screen and (min-width: 1280px){
	.top_h {
		background-position: left -100px top -90px;
		background-size: 480px auto;
	}
}



.top .sec01 {
	position: relative;
    padding: 30px 0 80px;
	background-image: url("../image/awa01.svg");
    background-position: right -50px top -50px;
    background-size: 60% auto;
}
.box_topai {
    width: 85%;
	margin: auto;
	padding: 40px 0 0;
	background-image: url("../image/cut01.svg");
    background-position: 100% 4%;
    background-size: 30% auto;
}
.topai_h2{
	width: 100%;
	margin-bottom: 20px;
}
.topai_h3 {
	box-decoration-break: clone;	
	-webkit-box-decoration-break: clone;
	display: inline;
	padding: .3em;
	line-height: 2.5;
	background-image: linear-gradient(90deg, rgba(244, 230, 249, 1), rgba(206, 239, 255, 1));
	font-size: clamp( 18px, 3vw, 45px );
}
.box_topai .img {
	position: relative;
	padding: 20px 0;
	z-index: 1;
}
.box_topai .text {
	position: relative;
	z-index: 10;
}
.tex_topai {
	line-height: 2;
	text-align: left;
	padding: 15px 0;
}
.top_cut01 {
	position: absolute;
	z-index: 10;
	left: 20px;
	bottom: -40px;
	width: 100px;
}
.top_cut02 {
	position: absolute;
	z-index: 10;
	right: 20px;
	bottom: -40px;
	width: 130px;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.top .sec01 {
		padding: 20px 0 120px;
	}
	.box_topai {
		padding: 60px 0 0;
	}
	.top_cut01 {
		bottom: -70px;
		width: 160px;
	}
	.top_cut02 {
		bottom: -70px;
		width: 180px;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.top .sec01 {
		margin-top: -50px;
		padding: 70px 0 120px;
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg");
		background-position: right -50px top 0, left 20px top 70px;
		background-size: 40% auto, 80px auto;
	}
	.box_topai {
		max-width: 1360px;
		background-image: none;
	}
	.box_topai .box1 {
		position: relative;
		width: 100%;
	}
	.box_topai .text {
		position: absolute;
		top: 0;
		left: 0;
	}
	.box_topai .img {
		width: 100%;
		padding: 0 0 0 40%;
	}
	.tex_topai {
		width: 44%;
		padding: 50px 0 0;
	}
}
@media screen and (min-width: 1280px){
	.top .sec01 {
		padding: 100px 0 150px;
		background-size: 40% auto, 100px auto;
	}
	.top_cut01 {
		bottom: -70px;
		width: 200px;
	}
	.top_cut02 {
		bottom: -70px;
		width: 240px;
	}
}
@media screen and (min-width: 1600px){
	.top .sec01 {
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg"),  url("../image/cut02.svg");
		background-position: right -50px top 0, left 20px top 60px, left 30px center;
		background-size: 40% auto, 140px auto, 80px auto;
	}
	.topai_h3 {
		line-height: 3;
	}
	.tex_topai {
		padding: 80px 0;
		line-height: 2.2;
		font-size: 18px;
	}
	.top_cut01 {
		bottom: -70px;
		width: 260px;
	}
	.top_cut02 {
		bottom: -70px;
		width: 350px;
	}
}
@media screen and (min-width: 1800px){
	.top .sec01 {
		background-position: right -50px top 0, left 50px top 80px, left 70px center;
		background-size: 40% auto, 200px auto, 100px auto;
	}
}



.top .sec02 {
	padding: 70px 0;
	background-color: #ceefff;
}
.box_ap {
	width: 85%;
	margin: auto;
	max-width: 600px;
}
.tit_contents {
	text-align: center;
}
.apbox {
	position: relative;
	margin-top: 70px;
}
.apbox .text {
	padding: 30px;
    background-color: #fff;
}
.ap_point {
	position: absolute;
	top: 0;
	left: 15px;
	width: clamp( 50px, 7vw, 100px );
}
.ap_h2 {
	padding-top: 15px;
	font-size: clamp( 18px, 2.6vw, 36px );
}
.tex_styleap {
	padding: 30px 0;
	text-align: left;
}
.ap_cut01 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 100px;
}
.ap_cut02 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 120px;
}
.ap_cut03 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -20px;
	width: 140px;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.ap_cut01 {
		right: -30px;
		width: 120px;
	}
	.ap_cut02 {
		right: -30px;
		width: 150px;
	}
	.ap_cut03 {
		right: -30px;
		width: 190px;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.top .sec02 {
		background-image: url("../image/awa02.svg"),  url("../image/awa01.svg"), url("../image/awa02.svg");
		background-position: right -80px top 300px, left -80px top 700px, right -80px bottom 300px;
		background-size: 30% auto;
	}
	.box_ap {
		max-width: 1360px;
		margin: auto;
	}
	.apbox .img  {
		width: 50%;
	}
	.apbox .text {
		width: 50%;
		display: grid;
		align-items: center;
	}
	.ap_point02 {
		right: 15px;
		left: auto;
	}
	.ap_cut02 {
		left: 30%;
		right: auto;
	}
}
@media screen and (min-width: 1280px){
	.top .sec02 {
		padding: 100px 0;
	}
	.apbox {
		margin-top: 100px;
	}
	.ap_cut01 {
		width: 150px;
	}
	.ap_cut02 {
		width: 180px;
	}
	.ap_cut03 {
		width: 240px;
	}
}
@media screen and (min-width: 1600px){
	.apbox .text {
		padding: 50px;
	}
	.ap_point01, .ap_point03 {
		right: 30px;
		left: auto;
	}
	.ap_point02 {
		left: 30px;
		right: auto;
	}
	.ap_cut01 {
		width: 225px;
	}
	.ap_cut02 {
		width: 250px;
	}
	.ap_cut03 {
		width: 335px;
	}
}


.top .sec03 {
    padding: 70px 0;
	background-image: url("../image/awa02.svg");
    background-position: left -50px bottom -50px;
    background-size: 60% auto;
}
/*プランRSS*/
.plan_rss_box {
	width: 85%;
	margin: auto;
	max-width: 600px;
	text-align: center;
}
.plan_rss {
	width: 100%;
	margin: auto;
	display: block;
	padding: 30px 0px 0px;
}
.plan_rss .mini {
    width: 100%;
    max-width: 360px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto 50px;
    text-align: center;
}
.plan_rss .mini .plan_img {
	width: 100%;
	margin: auto;
	text-align: center;
}
.plan_rss .mini h4{
	font-size: 16px;
	padding: 15px 0;
	text-align: left;
	font-family: "Helvetica Neue",
	Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
	font-weight: normal;
}
.plan_rss .mini h4 a {
	color: #000;
}
.plan_rss .mini h4 a:hover {
	color: #c67ce0;
}
.plan_text p {
	display: none;
}

/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
   .plan_rss .mini {
	display:flex;
	max-width: 600px;
	padding: 20px;
	text-align: left;
    }
    .plan_rss .mini .plan_img {
	width: 298px;
	order: 1;
    }
   .plan_rss .mini .plan_img img{
	width: 100%;
	height: auto;
    }
   .plan_rss .mini a{
	font-size: 18px;
    }
   .plan_rss .mini h4{
	font-size: 18px;
	padding: 10px 20px;
	margin-bottom: 10px;
    }
   .plan_rss .mini .plan_text {
	width: 380px;
	margin-left: 20px;
	text-align: left;
	order:2;
    }
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.top .sec03 {
		background-size: 30% auto;
	}
	.plan_rss_box {
		max-width: 1360px;
		padding: 0 0 50px;
		background-size: auto;
	}
	.plan_rss {
    display: flex;
    justify-content: space-between;
	}
   .plan_rss .mini {
	width: 33%;
	padding-top: 15px;
	   display: flex;
	   flex-flow: column;
	   margin: 0px;
	}
	.plan_rss .mini h4 {
		padding: 10px 0px;
	}
   .plan_rss .mini .plan_img {
	width: 100%;
	}	
   .plan_rss .mini .plan_text {
	width: 85%;
	margin: auto;
	   flex-grow: 1;
	}
}
@media screen and (min-width: 1280px){
	.top .sec03 {
		padding: 100px 0;
	}
}
@media screen and (min-width: 1600px){
	.top .sec03 {
		background-image: url("../image/cut10.svg"), url("../image/cut11.svg"), url("../image/awa02.svg"), url("../image/cut14.svg"), url("../image/awa01.svg");
		background-position: left 20px bottom 600px, left 30px bottom 200px, left -50px bottom -50px, right 30px bottom 400px, right -50px bottom 500px;
		background-size: 130px auto, 150px auto, 30% auto, 130px auto, 30% auto;
	}
}


/*空室検索*/
.top_cut03 {
	position: absolute;
	z-index: 10;
	left: 10px;
	top: -40px;
	width: 100px;
}
.top_cut04 {
	position: absolute;
	z-index: 10;
	right: 10px;
	top: -40px;
	width: 130px;
}
.akiken {
	position: relative;
    width: 85%;
	margin: auto;
	max-width: 600px;
    padding: 100px 0 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
.akiken .box {
	margin-top: 20px;
	padding: 20px 0 40px;
	border-radius: 10px;
	background-color: #ceefff;
}
.plan_form{
	width: 100%;
	max-width: 300px;
	margin: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px 15px 0;
}
.plan_form .form_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.plan_form select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding:0 10px;
	height: 30px;
	background-color: #fff;
	background-image: url("../image/aki_ya01.svg");
	background-repeat: no-repeat;
	background-position: right 3px center;
	background-size: 8px auto;
	position: relative;
	border-radius: 1px;
	border: 1px solid #fff;
}
.plan_form input{
	position: relative;
	border-radius: 1px;
	border: 1px solid #fff;
	background-color: #fff;
	padding:10px;
}
.plan_form .check_in {
	padding-bottom: 15px;
}
.plan_form .check_in input{
	width: 122px;
	height: 30px;
	padding: 0 10px;
	cursor: pointer;
}
.plan_form .undecided {
	width: 122px;
	padding-bottom: 15px;
}
.plan_form .undecided input{
	margin:0 0 0 -8px;
}
.plan_form .guests {
	padding-bottom: 15px;
}
.plan_form .guests select{
	width: 122px;
	height: 30px;
}
.plan_form .type {
	padding-bottom: 15px;
}
.plan_form .type select{
	width: 122px;
	height: 30px;
}
.plan_form .price {
	padding-bottom: 15px;
}
.plan_form .price select{
	width: 122px;
	height: 30px;
}
.plan_form .search_btn {
	width: 150px;
	margin: auto;
	padding-top: 25px;
}
.plan_form .search_btn .btn{
	width: 150px;
	padding:7px 5px 7px 5px; 
	transition: ease .6s;
	background: linear-gradient(90deg, rgba(198, 124, 224, 1), rgba(70, 197, 255, 1)) 0 50% / 200% 100%;
	border:none;border-radius: 10px;
	font-size: 16px; 
	cursor: pointer;
	color: #fff;
}
.plan_form .search_btn .btn:hover {
	background-position: 100% 50%;
	color: #fff;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.plan_form {
		max-width: 1000px;
        padding: 20px 15px 0;
	}
	.plan_form .form_box {
		max-width: 450px;
		margin: auto;
	}
	.plan_form .price {
		padding-left: 13px;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.akiken {
		max-width: 1360px;
		margin: 0 auto 50px;
		padding: 30px 0px 0px;
	}
	.akiken .box {
		width: 100%;
		padding: 10px 0 0;
	}
	.plan_form {
		width: 100%;
		max-width: 880px;
		padding: 0 25px 0;
		margin-top: 20px;
	}
	.plan_form form {
		margin: auto;
		display: flex;
		justify-content: space-between;
	}
	.plan_form .form_box {
		flex-wrap: nowrap;
		max-width: 1000px;
		margin: 0;
	}
	.plan_form p {
		font-size: 14px;
	}
	.plan_form .check_in input{
		width: 70px;
	}
	.plan_form .undecided {
		width: 90px;
	}
	.plan_form .guests {
		margin-right: 13px;
	}
	.plan_form .guests select {
		width: 100px;
	}
	.plan_form .type select {
		width: 100px;
	}
	.plan_form .price {
		width: auto;
		margin: 0 0 0 13px;
		padding-left: 0;
		padding-bottom: 27px;
	}
	.plan_form .price select {
		width: 100px;
	}
   .plan_form .search_btn {
	   margin: 0px;
	   padding-top: 20px;
    }
}
@media screen and (min-width: 1280px){
	.akiken {
		margin: 0 auto 80px;
	}
	.top_cut03 {
	left: 0;
	top: -40px;
	width: 130px;
	}
	.top_cut04 {
	right: 0;
	top: -40px;
	width: 200px;
	}
	.plan_form {
		max-width: 1100px;
	}
	.plan_form .check_in input{
		width: 100px;
	}
	.plan_form .undecided {
		width: 100px;
	}
	.plan_form .guests select {
		width: 137px;
	}
	.plan_form .type select {
		width: 137px;
	}
	.plan_form .price select {
		width: 137px;
	}
}


/*SNS*/
.box_sns {
	width: 85%;
	margin: auto;
	max-width: 499px;
	padding: 50px 0 0;
}
.facebook-wrapper {
	max-width: 499px;
	margin: auto;
}
.snsbana_box {
	padding: 50px 0 0;
}
.snsbana li {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 15px;
	color: #fff;
	border-radius: 10px;
}
.bg_pur {
	background-color: #c67ce0;
}
.bg_bl {
	background-color: #46c5ff;
}
.snsbana li img {
	height: 30px;
	width: auto;
}
.snsbana li::after{
    content: '★';
	position: absolute;
    top:26%;
    right: 15px;
    transition: all .6s;
}
.snsbana li:hover::after{
    transform: rotateY(180deg);
}
.snsbana li a {
	display: block;
	width: 100%;
	padding: 15px;
}
.sns_we {
	padding: 15px;
}
.snsbana li span {
	margin-left: 20px;
	vertical-align: middle;
}
/*1024px以上　PCサイト用*/
@media print, screen and (min-width: 1024px){
	.box_sns {
		max-width: 1200px;
	}
	.facebook-wrapper {
		width: 50%;
		margin: 0;
	}
	.snsbana_box {
		width: 50%;
		padding: 0 0 0 4%;
	}
}
@media screen and (min-width: 1280px){
	.box_sns {
		padding: 100px 0 0;
	}
	.facebook-wrapper {
		max-width: 500px;
	}
	.snsbana li a, .sns_we {
		padding: 34px 50px;
	}
	.snsbana li img {
		height: 45px;
	}
	.snsbana li::after {
		font-size: 26px;
		top: 38%;
		right: 30px;
	}
	.snsbana li span {
		font-size: 20px;
	}
}






/*------------------------------SPACE-VESSELページ------------------------------*/
.sb_head {
	background-image: url("../image/sb_head2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.sb_head {
		background-image: url(../image/sb_head.jpg);
	}
}


.sb .sec01 {
	position: relative;
    padding: 30px 0 120px;
	background-image: url("../image/awa01.svg");
    background-position: right -50px top -50px;
    background-size: 60% auto;
}
.sbai_box {
	padding: 40px 0 0;
	background-image: url("../image/cut01.svg");
    background-position: 100% 4%;
    background-size: 30% auto;
}
.sbai_h3 {
	line-height: 2;
	font-size: clamp( 20px, 3vw, 36px );
}
.sbfac_box {
	padding: 50px 0 0;
}
.sbfac_tit {
	text-align: center;
}
.t-kan {
	width: 100%;
	max-width: 1000px;
	margin: 30px auto 0;
	border-collapse: collapse;
	text-align: left;
}
.t-kan tr {
	display: block;
	padding: 15px 0px;
	border-bottom: 1px solid #ccc;
}
.t-kan tr:first-child {
	border-top: 1px solid #ccc;
}
.t-kan th {
	width: 100%;
	display: block;
	padding: 7px 15px;
}
.t-kan td {
	line-height: 1.8em;
	position: relative;
	padding: 0px 15px;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.sb .sec01 {
		padding: 20px 0 150px;
	}
	.sbai_box {
		padding: 60px 0 0;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.sb .sec01 {
		margin-top: -50px;
		padding: 70px 0 120px;
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg");
		background-position: right -50px top 0, left 20px top 70px;
		background-size: 40% auto, 80px auto;
	}
	.sbai_box {
		max-width: 1360px;
		background-image: none;
	}
	.sbai_box .text {
		width: 40%;
	}
	.sbai_box .img {
		width: 55%;
	}
	.sbfac_box {
		padding: 100px 0 0;
	}
	.t-kan tr {
		width: 100%;
		display: table-row;
		padding: 0px;
	}
	.t-kan th {
		display: table-cell;
		width: 200px;
		padding: 20px;
		vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;		
	}
	.t-kan td {
		padding: 20px;
	}
}
@media screen and (min-width: 1280px){
	.sb .sec01 {
		padding: 100px 0 150px;
		background-size: 40% auto, 100px auto;
	}
	.top_cut01 {
		bottom: -70px;
		width: 200px;
	}
	.top_cut02 {
		bottom: -70px;
		width: 240px;
	}
}
@media screen and (min-width: 1600px){
	.sb .sec01 {
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg"),  url("../image/cut02.svg");
		background-position: right -50px top 0, left 20px top 60px, left 30px center;
		background-size: 40% auto, 140px auto, 80px auto;
	}
}
@media screen and (min-width: 1800px){
	.sb .sec01 {
		background-position: right -50px top 0, left 50px top 80px, left 70px center;
		background-size: 40% auto, 200px auto, 100px auto;
	}
}



.sb .sec02 {
	padding: 1px 0 70px;
	background-color: #ceefff;
}
.sbbox {
	position: relative;
	margin-top: 70px;
}
.sbbox .text {
	padding: 30px 30px 50px;
    background-color: #fff;
	background-position: right 20px top 20px;
    background-size: 80px auto;
}
.sb_tit {
	padding-bottom: 10px;
	font-size: clamp( 24px, 3vw, 36px );
}
.sb_setsu {
	padding: 10px 0;
}
.sb_setsu dt {
	font-weight: bold;
}
.pet_ok {
	display: inline-block;
	padding: 3px 6px;
	background-color: #c67ce0;
	color: #fff;
	border-radius: 3px;
	font-size: 14px;
}
.sb01 .text {
	background-image: url("../image/oushi_s.svg");
}
.sb02 .text {
	background-image: url("../image/kani_s.svg");
}
.sb03 .text {
	background-image: url("../image/shishi_s.svg");
}
.sb04 .text {
	padding: 30px;
	background-image: url("../image/futago_s.svg");
}
.sb_cut01 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 100px;
}
.sb_cut02 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 120px;
}
.sb_cut03 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 140px;
}
.sb_cut04 {
	position: absolute;
	z-index: 10;
	right: 10px;
	top: 72%;
	width: 30%;
	max-width: 160px;
}
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 100%;
    margin:0 auto;
	background-color: #fff;
}
.accordion-area li{
    margin: 10px 0;	
}
/*アコーディオンタイトル*/
.pet_tit {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 18px;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
	text-align: left;
	color: #c67ce0;
	font-family: "Helvetica Neue",
	Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
}
/*アイコンの＋と×*/
.pet_tit::before,
.pet_tit::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #c67ce0; 
}
.pet_tit::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
}
.pet_tit::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.pet_tit.close::before{
	transform: rotate(45deg);
}
.pet_tit.close::after{
	transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box_a {
    display: none;/*はじめは非表示*/
	margin:0 3% 3% 3%;
    padding: 3%;
}
.box_a h5 {
	font-size: 16px;
	padding: 20px 0px 2px;
	border-bottom: 1px dotted #c67ce0;
}
.box_a ul {
	padding-left: 20px;
}
.box_a li {
	list-style: disc;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.sb .sec02 {
		padding: 20px 0 70px;
	}
	.sbbox .text {
		background-position: right 30px top 30px;
	}
	.sb_setsu {
		display: flex;
	}
	.sb_setsu dt {
		width: 7em;
	}
	.sb_setsu dd {
		width: calc( 100% - 7em);
	}
	.sb_cut01 {
		right: -30px;
		width: 120px;
	}
	.sb_cut02 {
		right: -30px;
		width: 180px;
	}
	.sb_cut03 {
		right: -30px;
		width: 170px;
	}
	.sb_cut04 {
		top: 80%;
		width: 120px;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.sb .sec02 {
		background-image: url("../image/awa02.svg"),  url("../image/awa01.svg"), url("../image/awa02.svg");
		background-position: right -80px top 300px, left -80px top 700px, right -80px bottom 300px;
		background-size: 30% auto;
	}
	.sbbox .img  {
		width: 50%;
	}
	.sbbox .text {
		width: 50%;
		display: grid;
		align-items: center;
		padding: 30px;
	}
	.sb_cut02 {
		left: 30%;
		right: auto;
	}
	.sb_cut04 {
		top: 32%;
		right: 52%;
	}
}
@media screen and (min-width: 1280px){
	.sb .sec02 {
		padding: 50px 0 100px;
	}
	.sbbox {
		margin-top: 100px;
	}
	.sb_cut01 {
		width: 150px;
	}
	.sb_cut02 {
		width: 200px;
	}
	.sb_cut03 {
		width: 200px;
	}
	.sb_cut04 {
		top: 50%;
		width: 150px;
	}
}
@media screen and (min-width: 1600px){
	.sbbox .text {
		padding: 50px;
		background-position: right 50px top 50px;
		background-size: 120px auto;
	}
	.sb_cut01 {
		width: 200px;
	}
	.sb_cut02 {
		width: 250px;
	}
	.sb_cut03 {
		width: 250px;
	}
	.sb_cut04 {
		top: 50%;
		width: 200px;
		max-width: none;
	}
}



.sb .sec03 {
	padding: 70px 0;
	background-image: url("../image/awa02.svg");
    background-position: left -50px bottom -50px;
    background-size: 60% auto;
}
.box_terms {
	padding: 0 0 50px;
}
.terms_tit {
	text-align: center;
}
.max70 {
	max-width: 70em;
	margin: auto;
}
.box_terms .box1 {
	margin: 10px 0;
	padding: 20px;
	background-image: linear-gradient(90deg, #f4e6f9, #ceefff);
}
.box_terms ul {
	padding: 15px 0 0 20px;
}
.box_terms li {
	list-style: disc;
	margin-bottom: 10px;
}
.t-can {
	width: 98%;
	margin: 20px auto 0px;
	padding-right: 20px;
	border-collapse: collapse;
	text-align: center;
	border: 1px solid #8D99A0;
}
.t-can th {
	width: 50%;
	background-color: #f4e6f9;
	padding: 10px;
	border: 1px solid #8D99A0;
	font-weight: normal;
}
.t-can td {
    padding: 10px;
	border: 1px solid #8D99A0;
	background-color: #fff;
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.sb .sec03 {
		background-size: 30% auto;
	}
	.t-can {
		max-width: 600px;
		margin: 20px 0 0 20px;
	}
}
@media screen and (min-width: 1280px){
	.sb .sec03 {
		padding: 100px 0;
	}
}
@media screen and (min-width: 1600px){
	.sb .sec03 {
		background-image: url("../image/cut10.svg"), url("../image/cut11.svg"), url("../image/awa02.svg"), url("../image/cut14.svg"), url("../image/awa01.svg");
		background-position: left 20px bottom 600px, left 30px bottom 200px, left -50px bottom -50px, right 30px bottom 400px, right -50px bottom 500px;
		background-size: 130px auto, 150px auto, 30% auto, 130px auto, 30% auto;
	}
}




/*------------------------------アクティビティーページ------------------------------*/
.act_head {
	background-image: url("../image/act_head2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.act_head {
		background-image: url(../image/act_head.jpg);
	}
}


.act .sec01 {
	position: relative;
    padding: 30px 0 120px;
	background-image: url("../image/awa01.svg");
    background-position: right -50px top -50px;
    background-size: 60% auto;
}
.actai_box {
	padding: 40px 0 0;
	background-image: url("../image/cut01.svg");
    background-position: 100% 4%;
    background-size: 30% auto;
}
.actai_h3 {
	line-height: 2;
	font-size: clamp( 20px, 2.8vw, 36px );
}
.shoku_box {
	margin-top: 30px;
	padding: 30px;
	background-image: linear-gradient(90deg, #f4e6f9, #ceefff);
}
.shoku_tit {
	font-size: 18px;
	font-family: "Helvetica Neue",
	Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.act .sec01 {
		padding: 20px 0 150px;
	}
	.actai_box {
		padding: 60px 0 0;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.act .sec01 {
		margin-top: -50px;
		padding: 70px 0 120px;
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg");
		background-position: right -50px top 0, left 20px top 70px;
		background-size: 40% auto, 80px auto;
	}
	.actai_box {
		max-width: 1360px;
		background-image: none;
	}
	.actai_box .text {
		width: 40%;
	}
	.actai_box .img {
		width: 55%;
	}
	.shoku_box {
		padding: 50px;
	}
}
@media screen and (min-width: 1280px){
	.act .sec01 {
		padding: 100px 0 150px;
		background-size: 40% auto, 100px auto;
	}
}
@media screen and (min-width: 1600px){
	.act .sec01 {
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg"),  url("../image/cut02.svg");
		background-position: right -50px top 0, left 20px top 60px, left 30px center;
		background-size: 40% auto, 140px auto, 80px auto;
	}
}
@media screen and (min-width: 1800px){
	.act .sec01 {
		background-position: right -50px top 0, left 50px top 80px, left 70px center;
		background-size: 40% auto, 200px auto, 100px auto;
	}
}



.act .sec02 {
	padding: 70px 0;
	background-color: #ceefff;
}
.activity_tit {
	text-align: center;
}
.actbox {
	position: relative;
	margin-top: 70px;
}
.actbox .text {
	padding: 30px 30px 50px;
    background-color: #fff;
	background-position: right 20px top 20px;
    background-size: 80px auto;
}
.act_tit {
	padding-bottom: 10px;
	font-size: clamp( 24px, 3vw, 36px );
}
.act_chu li {
	margin-bottom: 10px;
}
.act_cut01 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 100px;
}
.act_cut02 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 120px;
}
.act_cut03 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 140px;
}
.act_cut04 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 100px;
}
.act_cut05 {
	position: absolute;
	z-index: 10;
	right: -10px;
	bottom: -30px;
	width: 120px;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.act_cut01 {
		right: -30px;
		width: 140px;
	}
	.act_cut02 {
		right: -30px;
		width: 180px;
	}
	.act_cut03 {
		right: -30px;
		width: 170px;
	}
	.act_cut04 {
		right: -30px;
	}
	.act_cut05 {
		right: -30px;
		width: 140px;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.act .sec02 {
		background-image: url("../image/awa02.svg"),  url("../image/awa01.svg"), url("../image/awa02.svg");
		background-position: right -80px top 300px, left -80px top 700px, right -80px bottom 300px;
		background-size: 30% auto;
	}
	.actbox .img  {
		width: 50%;
	}
	.actbox .img img {
		object-fit: cover;
		object-position: right center;
		height: 100%;
		width: auto;
	}
	.actbox .text {
		width: 50%;
		display: grid;
		align-items: center;
		padding: 30px 30px 50px;
	}
	.act_cut02 {
		left: 30%;
		right: auto;
	}
	.act_cut04 {
		left: 35%;
		right: auto;
	}
}
@media screen and (min-width: 1280px){
	.act .sec02 {
		padding: 100px 0;
	}
	.actbox {
		margin-top: 100px;
	}
	.actbox .text {
		padding: 50px 50px 70px;
	}
	.act_cut03 {
		width: 200px;
	}
	.act_cut04 {
		width: 110px;
	}
	.act_cut05 {
		width: 160px;
	}
}
@media screen and (min-width: 1600px){
	.act_cut01 {
		width: 200px;
	}
	.act_cut02 {
		width: 250px;
	}
	.act_cut03 {
		width: 250px;
	}
	.act_cut04 {
		width: 150px;
	}
	.act_cut05 {
		width: 200px;
	}
}



.act .sec03 {
	padding: 70px 0;
	background-image: url("../image/awa02.svg");
    background-position: left -50px bottom -50px;
    background-size: 60% auto;
}
.share_tit {
	text-align: center;
}
.box_share .box1 {
	margin: 20px 0 50px;
	padding: 30px;
	background-image: linear-gradient(90deg, #f4e6f9, #ceefff);
}
.box_share p {
	padding: 0 0 20px;
	line-height: 2.2;
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.act .sec03 {
		background-size: 30% auto;
	}
}
@media screen and (min-width: 1280px){
	.act .sec03 {
		padding: 100px 0;
	}
	.box_share .box1 {
		margin: 30px 0 70px;
	}
}
@media screen and (min-width: 1600px){
	.act .sec03 {
		background-image: url("../image/cut10.svg"), url("../image/cut11.svg"), url("../image/awa02.svg"), url("../image/cut14.svg"), url("../image/awa01.svg");
		background-position: left 20px bottom 700px, left 30px bottom 200px, left -50px bottom -50px, right 30px bottom 400px, right -50px bottom 200px;
		background-size: 130px auto, 150px auto, 30% auto, 130px auto, 30% auto;
	}
}



/*------------------------------艦長の紹介ページ------------------------------*/
.prof_head {
	background-image: url("../image/kanc_head2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.prof_head {
		background-image: url(../image/kanc_head.jpg);
	}
}


.prof .sec01 {
	position: relative;
    padding: 30px 0 120px;
	background-image: url("../image/awa01.svg");
    background-position: right -50px top -60px;
    background-size: 60% auto;
}
.box_prof {
	padding: 40px 0 0;
	background-image: url("../image/cut01.svg");
    background-position: right top;
    background-size: 30% auto;
}
.prof_box .img {
	width: 60%;
	max-width: 300px;
	margin: auto;
	padding: 50px 0;
}
.prof_tit {
	line-height: 2;
	font-size: clamp( 20px, 2vw, 28px );
}
.prof_tit em {
	font-size: clamp( 24px, 2.8vw, 36px );
	font-style: normal;
}
.t-kanc {
	width: 100%;
	max-width: 1000px;
	margin: 30px auto 0;
	border-collapse: collapse;
	text-align: left;
}
.t-kanc tr {
	display: block;
	padding: 15px 0px;
	border-bottom: 1px solid #ccc;
}
.t-kanc tr:first-child {
	border-top: 1px solid #ccc;
}
.t-kanc th {
	width: 100%;
	display: block;
	padding: 7px 15px;
}
.t-kanc td {
	line-height: 1.8em;
	position: relative;
	padding: 0px 15px;
}

/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.prof .sec01 {
		padding: 20px 0 150px;
		background-position: right -50px top -70px;
	}
	.box_prof {
		padding: 60px 0 0;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.prof .sec01 {
		margin-top: -50px;
		padding: 70px 0 120px;
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg");
		background-position: right -50px top 0, left 20px top 70px;
		background-size: 40% auto, 80px auto;
	}
	.box_prof {
		background-image: none;
	}
	.prof_box .text {
		width: 60%;
	}
	.prof_box .img {
		width: 35%;
		display: flex;
		align-items: flex-start;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	.t-kanc tr {
		width: 100%;
		display: table-row;
		padding: 0px;
	}
	.t-kanc th {
		display: table-cell;
		width: 140px;
		padding: 20px;
		vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;		
	}
	.t-kanc td {
		padding: 20px;
	}
}
@media screen and (min-width: 1280px){
	.prof .sec01 {
		padding: 100px 0 150px;
		background-size: 40% auto, 100px auto;
	}
}
@media screen and (min-width: 1600px){
	.prof .sec01 {
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg"),  url("../image/cut02.svg");
		background-position: right -50px top 0, left 20px top 60px, left 30px center;
		background-size: 40% auto, 140px auto, 80px auto;
	}
}
@media screen and (min-width: 1800px){
	.prof .sec01 {
		background-position: right -50px top 0, left 50px top 80px, left 70px center;
		background-size: 40% auto, 200px auto, 100px auto;
	}
	.prof_box .img {
		align-items: center;
	}
}


.prof .sec02 {
	padding: 90px 0 70px;
	background-image: url("../image/awa02.svg");
    background-position: left -50px bottom -50px;
    background-size: 60% auto;
}
.omoi_tit {
	text-align: center;
}
.omoi_box {
	margin: 20px 0 50px;
	padding: 30px;
	background-image: linear-gradient(90deg, #f4e6f9, #ceefff);
}
.omoi_box .img {
	padding: 20px 0 0;
}
.omoi_box .img img {
	object-fit: cover;
	object-position: 20% 50%;
	aspect-ratio: 3/2;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.omoi_box .img img {
		object-position: center;
		aspect-ratio: 2/1;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.prof .sec02 {
		background-size: 30% auto;
	}
	.omoi_box {
		margin: 30px 0 50px;
		padding: 50px;
	}
	.omoi_box .img {
		padding: 50px 0 0;
	}
	.omoi_box .img img {
		aspect-ratio: 2.8/1;
	}
}
@media screen and (min-width: 1280px){
	.prof .sec02 {
		padding: 100px 0;
	}
	.omoi_box {
		margin: 30px 0 70px;
		padding: 80px;
	}
}
@media screen and (min-width: 1600px){
	.prof .sec02 {
		background-image: url("../image/cut10.svg"), url("../image/cut11.svg"), url("../image/awa02.svg"), url("../image/cut14.svg"), url("../image/awa01.svg");
		background-position: left 20px bottom 700px, left 30px bottom 200px, left -50px bottom -50px, right 30px bottom 400px, right -50px bottom 200px;
		background-size: 130px auto, 150px auto, 30% auto, 130px auto, 30% auto;
	}
}




/*------------------------------アクセス＆周辺観光ページ------------------------------*/
.acc_head {
	background-image: url("../image/acc_head2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.acc_head {
		background-image: url(../image/acc_head.jpg);
	}
}


.acc .sec01 {
	position: relative;
    padding: 30px 0 120px;
	background-image: url("../image/awa01.svg");
    background-position: right -50px top -60px;
    background-size: 60% auto;
}
.box_acc {
	padding: 40px 0 0;
	background-image: url("../image/cut01.svg");
    background-position: left top;
    background-size: 120px auto;
}
.map_tit {
	text-align: center;
}
.g_map {
	padding: 50px 0;
}
.yado_box {
	padding-bottom: 20px;
	text-align: center;
}
.yadomei {
	width: 220px;
	margin: auto;
	padding-bottom: 20px;
}
.yadojyo p {
	line-height: 2;
}
.yado_chu {
	max-width: 24em;
	margin: auto;
	padding: 15px 0 0;
	text-align: left;
	font-size: 14px;
}
.kuruma_box {
	margin: 20px 0 50px;
	padding: 30px;
	background-image: linear-gradient(90deg, #f4e6f9, #ceefff);
}
.kuruma_box h4 {
	font-size: 18px;
	padding-bottom: 15px;
}
.kuruma_list li {
	padding: 10px 0 10px 30px;
	background-image: url("../image/cut_car.svg");
    background-position: left top 15px;
    background-size: 20px auto;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.acc .sec01 {
		padding: 20px 0 150px;
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg");
		background-position: right -50px top -50px, left 20px top 20px;
		background-size: 45% auto, 120px auto;
	}
	.box_acc {
		padding: 60px 0 0;
		background-image: none;
	}
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.acc .sec01 {
		margin-top: -50px;
		padding: 70px 0 120px;
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg");
		background-position: right -50px top 0, left 20px top 80px;
		background-size: 40% auto, 150px auto;
	}
	.box_acc {
		background-image: none;
	}
	.yado_box {
		max-width: 850px;
		margin: 0 auto;
	}
	.yadomei {
		display: flex;
		align-items: center;
		width: 300px;
		margin: 0;
		padding-bottom: 0;
	}
	.yadojyo {
		display: grid;
		align-items: center;
		text-align: left;
	}
	.yadojyo p {
		line-height: 2;
	}
	.yado_chu {
		margin: 0;
	}
}
@media screen and (min-width: 1280px){
	.acc .sec01 {
		padding: 100px 0 150px;
		background-size: 40% auto, 100px auto;
	}
}
@media screen and (min-width: 1600px){
	.acc .sec01 {
		background-image: url("../image/awa01.svg"),  url("../image/cut01.svg"),  url("../image/cut02.svg");
		background-position: right -50px top 0, left 20px top 60px, left 30px center;
		background-size: 40% auto, 140px auto, 80px auto;
	}
}
@media screen and (min-width: 1800px){
	.acc .sec01 {
		background-position: right -50px top 0, left 50px top 80px, left 70px center;
		background-size: 40% auto, 200px auto, 100px auto;
	}
}


.acc .sec02 {
	padding: 90px 0 70px;
	background-color: #ceefff;
	background-image: url("../image/awa02.svg"), url("../image/awa01.svg");
    background-position: left -50px bottom -50px, right -50px bottom 280px;
    background-size: 60% auto;
}
.kanko_tit {
	text-align: center;
}
.kanko_box {
	margin: 20px 0 50px;
	padding: 30px;
	background-color: #fff;
}
.kanko_box h4 {
	font-size: clamp( 20px, 2vw, 28px );
}
.kanko_list {
	padding: 20px 0;
}
.kanko_list li {
	margin-bottom: 10px;
}
.kanko_list li a {
	color: #000;
}
.kanko_list li a:hover {
	color: #c67ce0;
}
.kanko_list img {
	width: 16px;
	margin-left: 10px;
}
.kanko_box .img img {
	object-fit: cover;
	object-position: center;
	aspect-ratio: 3/2;
}
.yufu_link {
	display: block;
	margin-bottom: 70px;
	padding: 15px 0;
	background-color: #c67ce0;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border-radius: 5px;
}
.yufu_link:hover {
	background-color: #46c5ff;
	color: #fff;
}
.yufu_link img {
	width: 30px;
	margin-left: 18px;
}
/*1024px以上　PCサイト用*/
@media screen and (min-width: 1024px){
	.acc .sec02 {
		background-size: 30% auto;
	}
	.max52 {
		max-width: 52em;
		margin: auto;
	}
	.kanko_box .text {
		width: 48%;
	}
	.kanko_box .img {
		width: 47%;
	}
	.kanko_list {
		padding: 30px 0 0;
	}
	.kanko_list li {
		margin-bottom: 20px;
	}
	.kanko_list li a {
		font-size: 18px;
	}
	.kanko_box3 .img img {
		aspect-ratio: 1/1;
	}
	#super {
		margin-top: -200px;
		padding-top: 200px;
	}
	.yufu_link {
		width: 500px;
		padding: 20px 0;
		font-size: 20px;
	}
}
@media screen and (min-width: 1280px){
	.acc .sec02 {
		padding: 100px 0;
	}
	.kanko_box1 .img img, .kanko_box2 .img img {
		aspect-ratio: 2/1;
	}
	.kanko_box3 .img img {
		aspect-ratio: 3/2;
	}
}
@media screen and (min-width: 1600px){
	.acc .sec02 {
		background-image: url("../image/cut10.svg"), url("../image/cut11.svg"), url("../image/awa02.svg"), url("../image/cut14.svg"), url("../image/awa01.svg");
		background-position: left 20px bottom 700px, left 30px bottom 200px, left -50px bottom -50px, right 30px bottom 400px, right -50px bottom 200px;
		background-size: 130px auto, 150px auto, 30% auto, 130px auto, 30% auto;
	}
}




/*------------------------------館長からのお知らせページ------------------------------*/
.new_head {
	background-image: url("../image/new_head2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
}
/*768px以上　タブレット用*/
@media screen and ( min-width : 768px ){
	.new_head {
		background-image: url(../image/new_head.jpg);
	}
}



.new .sec01 {
    padding: 50px 0;
	background-image: url("../image/awa01.svg"), url("../image/awa02.svg");
    background-position: right -50px top -60px, left -50px bottom -50px;
    background-size: 50% auto;
}
.box_new {
	width: 85%;
	margin: auto;
	max-width: 1080px;
	text-align: left;
}
#newsList {
	list-style: none;
	text-align: left;
}
#newsList li {
	padding: 15px 0px 15px;
	border-bottom: 1px solid #aaa;
}
.up_ymd {
	padding: 0px 5px;
}
.catName {
	font-size: 14px;
	background-color: #c67ce0;
	color: #fff;
	padding: 3px 10px;
	border-radius: 5px;
}
.pager {
	padding-top: 20px;
}
.pager a {
	padding: 0px 5px;
}
.backORcloseBtn {
	padding-top: 30px;
}
.backORcloseBtn a{
	position: relative;
	text-decoration: none;
	display: inline-block;
    padding: 10px 20px 10px 20px;
    text-align: center;
	background-color: #c67ce0;
    outline: none;
    transition: ease .2s;
	color: #fff;
	border-radius: 10px;
}
.backORcloseBtn a:hover{
	background-color: #46c5ff;
	color: #fff;
}
.new h4 {
	font-size: 18px;
	font-weight: normal;
	padding: 0px 0px 20px;
}
.detailText {
	padding: 20px 0px;
}
.detailUpfile {
	text-align: center;
}
.f14 {
	font-size: 12px;
	color: #aaa;
}
/*1024px以上　PCサイト用*/
@media print, screen and (min-width: 1024px){
	.new .sec01 {
		margin-top: -50px;
		padding: 150px 0 100px;
	}
	.box_new {
		padding-bottom: 100px;
	}
	.sp_on {
		display: none;
	}
	.new h4 {
		font-size: 24px;
	}
	.new #newsList li {
		padding: 30px 0px 20px;
	}
	.catName {
		margin-right: 15px;
	}
	.detailText {
		padding: 50px 0px;
	}
}
@media screen and (min-width: 1280px){
	.new .sec01 {
		background-image: url("../image/cut01.svg"), url("../image/awa01.svg"), url("../image/awa02.svg");
		background-position: right 20px top 80px, right -50px top -60px, left -50px bottom -50px;
		background-size: 120px auto, 30% auto, 30% auto;
	}
}
@media screen and (min-width: 1600px){
	.new .sec01 {
		background-image: url("../image/cut10.svg"), url("../image/cut11.svg"), url("../image/cut01.svg"), url("../image/awa01.svg"), url("../image/awa02.svg");
		background-position: left 20px bottom 700px, left 30px bottom 200px, right 20px top 80px, right -50px top -60px, left -50px bottom -50px;
		background-size: 130px auto, 150px auto, 150px auto, 30% auto, 30% auto;
	}
}