@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Playwrite+DK+Uloopet:wght@100..400&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

* {
	margin:0;
	padding:0;
	font-feature-settings: "palt";
	box-sizing: border-box;
}


html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-size:62.5%;
	line-height:1.6;
	letter-spacing: 0.1rem;
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}


body {
	background:url("../../images/front/bg4.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}


/*body#index {
	background:url("../../images/front/bg5.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}*/


ul, ol {
	list-style:none;
}


table {
	border-collapse: collapse;
	border:none;
}


a {
	text-decoration:none;
	color:teal;
}

.pc {display:block;}
.sp {display:none;}

@media all and (max-width:560px) {
.pc {display:none;}
.sp {display:block;}
}


/* color settings */
/* text */
.fc-navy {color:#2D3243 !important;}
.fc-red {color:#FF0024 !important;}
.fc-darkred {color:#990024 !important;}
.fc-blue {color:#1155C4 !important;}
.fc-blue2 {color:royalblue!important;}
.fc-blue3 {color:deepskyblue !important;}
.fc-yellow {color:#FEFE00 !important;}
.fc-white {color:#FFFFFF !important;}
.fc-black {color:#000000 !important;}

/* background */
.bg-navy {background-color:#2D3243 !important;}
.bg-red {background-color:#FF0024 !important;}
.bg-blue {background-color:#1155C4 !important;}
.bg-lightblue {background-color:#f6faff !important;}
.bg-yellow {background-color:#FEFE00 !important;}
.bg-lightgray {background-color:#F4F4F4 !important;}
.bg-orange {background-color:#eb6100 !important;}
.bg-lightred {background-color:#fef2f6 !important;}


/* font weight settings */
.fw-b {font-weight:bold !important;}
.fw-n {font-weight:normal!important;}
.fw-300 {font-weight:300 !important;} /* = .fw-n */
.fw-400 {font-weight:400 !important;}
.fw-500 {font-weight:500 !important;}
.fw-600 {font-weight:600 !important;}


/* font style settings */
.fstyl-i {font-style:italic !important;}
.fstyl-n {font-style:normal !important;}


/* alignment settings */
.ta-left {text-align:left !important;}
.ta-center {text-align:center !important;}
.ta-right {text-align:right !important;}

.va-top {vertical-align: top;}
.va-middle {vertical-align: middle;}
.va-bottom {vertical-align: bottom;}


/* font size settings */
.fs-x06 {font-size:0.6rem;}
.fs-x08 {font-size:0.8rem;}
.fs-x10 {font-size:1rem;}
.fs-x11 {font-size:1.1rem;}
.fs-x12 {font-size:1.2rem;}
.fs-x14 {font-size:1.4rem;}
.fs-x16 {font-size:1.6rem;}
.fs-x18 {font-size:1.8rem;}
.fs-x20 {font-size:2rem;}
.fs-x21 {font-size:2.1rem;}
.fs-x24 {font-size:2.4rem;}
.fs-x30 {font-size:3rem;}
.fs-x36 {font-size:3.6rem;}
.fs-x40 {font-size:4rem;}
.fs-x50 {font-size:5rem;}
.fs-x60 {font-size:6rem;}


/* margin settings */
/* margin bottom */
.mb-xxsmall {margin-bottom:3px !important;}
.mb-xsmall {margin-bottom:5px !important;}
.mb-small {margin-bottom:10px !important;}
.mb-medium {margin-bottom:15px !important;}
.mb-large {margin-bottom:30px !important;}
.mb-xlarge {margin-bottom:50px !important;}
.mb-xxlarge {margin-bottom:80px !important;}
.mb-exlarge {margin-bottom:100px !important;}
.mb-ultralarge {margin-bottom:150px !important;}

@media all and (max-width:768px) {
.mb-xxsmall {margin-bottom:3px !important;}
.mb-xsmall {margin-bottom:5px !important;}
.mb-small {margin-bottom:10px !important;}
.mb-medium {margin-bottom:15px !important;}
.mb-large {margin-bottom:20px !important;}
.mb-xlarge {margin-bottom:30px !important;}
.mb-xxlarge {margin-bottom:50px !important;}
.mb-exlarge {margin-bottom:70px !important;}
.mb-ultralarge {margin-bottom:100px !important;}	
}

/* margin top */
.mt-xxsmall {margin-top:3px !important;}
.mt-xsmall {margin-top:5px !important;}
.mt-small {margin-top:10px !important;}
.mt-medium {margin-top:15px !important;}
.mt-large {margin-top:30px !important;}
.mt-xlarge {margin-top:50px !important;}
.mt-xxlarge {margin-top:80px !important;}
.mt-exlarge {margin-top:100px !important;}
.mt-ultralarge {margin-top:150px !important;}

@media all and (max-width:768px) {
.mt-xxsmall {margin-top:3px !important;}
.mt-xsmall {margin-top:5px !important;}
.mt-small {margin-top:10px !important;}
.mt-medium {margin-top:15px !important;}
.mt-large {margin-top:20px !important;}
.mt-xlarge {margin-top:30px !important;}
.mt-xxlarge {margin-top:50px !important;}
.mt-exlarge {margin-top:70px !important;}
.mt-ultralarge {margin-top:100px !important;}	
}

.m-auto {
	margin-left:auto;
	margin-right:auto;
}

.mr-medium {margin-right:30px !important;}

@media all and (max-width:768px) {
.mr-medium {margin-right:0 !important;}
}


/* width size */
.w10 {width:10% !important;}
.w20 {width:20% !important;}
.w25 {width:25% !important;}
.w30 {width:30% !important;}
.w33 {width:33% !important;}
.w40 {width:40% !important;}
.w48 {width:48% !important;}
.w50 {width:50% !important;}
.w60 {width:60% !important;}
.w66 {width:66% !important;}
.w70 {width:70% !important;}
.w75 {width:75% !important;}
.w80 {width:80% !important;}
.w90 {width:90% !important;}
.w100 {width:100% !important;}


/* タブレットサイズで横幅100%に変化 */
.w10tab {width:10% !important;}
.w20tab {width:20% !important;}
.w25tab {width:25% !important;}
.w30tab {width:30% !important;}
.w33tab {width:33% !important;}
.w40tab {width:40% !important;}
.w48tab {width:48% !important;}
.w50tab {width:50% !important;}
.w60tab {width:60% !important;}
.w66tab {width:66% !important;}
.w70tab {width:70% !important;}
.w75tab {width:75% !important;}
.w80tab {width:80% !important;}
.w90tab {width:90% !important;}
.w100tab {width:100% !important;}

@media all and (max-width:768px) {
.w10tab,.w20tab,.w25tab,.w30tab,.w33tab,
.w40tab,.w48tab,.w50tab,.w60tab,.w66tab,.w70tab,
.w75tab,.w80tab,.w90tab,.w100tab {
width:100% !important
}
}

/* スマホサイズで横幅100%に変化 */
.w10sp {width:10% !important;}
.w20sp {width:20% !important;}
.w25sp {width:25% !important;}
.w30sp {width:30% !important;}
.w33sp {width:33% !important;}
.w40sp {width:40% !important;}
.w48sp {width:48% !important;}
.w50sp {width:50% !important;}
.w60sp {width:60% !important;}
.w66sp {width:66% !important;}
.w70sp {width:70% !important;}
.w75sp {width:75% !important;}
.w80sp {width:80% !important;}
.w90sp {width:90% !important;}
.w100sp {width:100% !important;}

@media all and (max-width:560px) {
.w10sp,.w20sp,.w25sp,.w30sp,.w33sp,
.w40sp,.w48sp,.w50sp,.w60sp,.w66sp,.w70sp,
.w75sp,.w80sp,.w90sp,.w100sp {
width:100% !important
}
}


/* titles */
.ttl_h2 {
	font-family: "Lobster", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height:1.1;
	font-size:4.5rem;
	margin:0 0 20px;
	/*-webkit-text-stroke: 1px white;
	text-shadow:0px 3px 3px rgba(0,0,0,.3);*/
}


.ttl_h3 {
	font-family: "Playwrite DK Uloopet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size:3rem;
	margin:0 0 20px;
	text-shadow:2px 3px rgba(0,0,0,.3);
}


.ttl_h4 {
	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size:2.1rem;
	margin:0 0 10px;
}


/* image settings */
.block_image {
    width:100%;
    position:relative;
    background:#F1F2F2;
}


.block_image::before {
    padding-top:100%;
    content:"";
    display:block;
}


.block_image img {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    object-fit:contain;
}


.block_4_3_ratio_image {
    width:100%;
    position:relative;
    background:#F1F2F2;
}


.block_4_3_ratio_image::before {
    padding-top:75%;
    content:"";
    display:block;
}


.block_4_3_ratio_image img {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    object-fit:contain;
}


.block_2_1_ratio_image {
    width:100%;
    position:relative;
}


.block_2_1_ratio_image::before {
    padding-top:50%;
    content:"";
    display:block;
}


.block_2_1_ratio_image img {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    object-fit:cover;
}


.ship_info .block_img {
	background:#FFF;
	padding:5px;
	box-shadow: 0px 3px 5px rgba(0,0,0,.2);
}


.block_img img {
	width:100%;
	vertical-align: bottom;
}



/* reset form parts */
input {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select {
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  box-sizing: content-box;
}

input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 50%;
  vertical-align: -2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000;
  content: '';
}

::placeholder {
	color:#CCC;
}

*:focus {
outline: none;
}


/* Checkboxes styles */
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 35px;
	font-size:1.6rem;
  color: #000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #AAA;
  position: absolute;
  left: 0;
  top: 4px;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: 0;
  left: 5px;
  border-radius: 0;
	border: 2px solid #6cc0e5;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


#wrapper {
	width:100%;
	height:auto;
	padding:20px 0 90px;
	position:relative;
}


#index #wrapper {
	width:100%;
	min-height:100%;
	padding:20px 0 0;
	position:relative;
	overflow: hidden;
}


.main_nav {
	width:100%;
	height:70px;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position:fixed;
	bottom:0;
	left:0;
	z-index:9999;
}


.main_nav li {
	width:25%;
	text-align:center;
	font-size:1.1rem;
}


.main_nav li a {
	display:block;
	width:100%;
	height:70px;
	background:#F5F6F6;
	padding:5px 0 0;
	border-right:1px solid #DDD;
}


.main_nav li:last-child a {
	display:block;
	width:100%;
	height:70px;
	background:#F5F6F6;
	padding:5px 0 0;
	border-right:none;
}


.main_nav li a div.menu_icon {
	font-size:1.8rem;
}