@charset "utf-8";
/* CSS Document */
html{
overflow-y:scroll;
}
body {
background:#fff;
font-family:"Noto Sans JP";
font-size: 90%;
line-height: 1.6;
color: #222222;
}
* {
margin:0;
padding:0;
}
.w1200{
width: 1200px;
margin: 0 auto;
}
li {
list-style-type: none;
}
a{
text-decoration: none;
}
h5.heading{
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-size: 165%;
text-align: center;
padding-bottom: 20px;
}
h5.heading span{
display: block;
font-size: 80%;
color: #FF3058;
}
p.catchphrase{
text-align: center;
font-weight: 500;
font-size: 105%;
padding-bottom: 35px;
}
span.red{
color: #FF3058;
font-weight: 500;
}
/*--------------------pankuzu */
#pankuzu{
display: block;
background: #fff;
font-size: 0.95em;
}
#pankuzu ul{
width: 1000px;
margin: 0 auto;
overflow: auto;
padding: 10px;
_zoom: 1;
}
#pankuzu li{
float: left;
list-style: none;
}
#pankuzu li + li:before{
margin: 0 8px;
content: '>';
}
/*--------------------container */
#container{
clear: both;
zoom: 1;
width: 100%;
margin: 0 auto;
font-size: 1.1em;
}
/*--------------------contact */
#contact{
background-color: #333333;
padding: 30px 0 50px;
color: #fff;
}
#contact h5{
/*font-size: 2rem;*/
padding-bottom:15px;
text-align: center;
}
.contacts{
width: 950px;
margin: 0 auto;
padding-top: 20px;
font-size: 1.02rem;
vertical-align:middle;
}
.contact_tyo ul{
display: flex;
justify-content: space-between;
}
.contact_tyo ul li{
width: calc(100%/2);
}
.contact_tyo ul li a{
color: #fff;
font-weight: bold;
}
.contact_tyo dl dd.migizoroe{
padding-left: 30px;
}
span.ph-number{
font-size: 1.8em;
padding-left: 15px;
letter-spacing: 4px;
}
/*--------------------上に戻るボタン */
a.pagetop {
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
display: block;
position: fixed;
bottom: 1em;
right: 1em;
font-size: 1.8em;
width: 2em;
height:2em;
line-height:1.8em;
border-radius: 3em;
text-align: center;
cursor: pointer;
}
a.pagetop:hover {
color: #fff !important;
background-color: #FF3058;
text-decoration: none;
transition: 0.5s;
}
/*--------------------top */
#top{
display: block;
width: 100%;
height: 600px;
background-image: url("../img/bg_top.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
#top h3{
font-size: 140%;
font-family: "Quicksand", sans-serif;
font-weight: 600;
letter-spacing: 0.08em;
text-align: left;
color: #fff;
position: absolute;
bottom: 7%;
left: 7%;
}
#top h3 span{
display: block;
width: 250px;
font-size: 95%;
text-align: center;
border: 1px solid #fff;
margin-bottom: 7px;
}
#top_sp{
display: none;
}
/*--------------------intro */
#intro{
display: block;
width: 100%;
background: url("../img/bg_white.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 50px 0;
}
#intro h5{
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: 280%;
font-weight: 600;
padding: 10px 0 30px;
line-height: 1.2em;
}
#intro h5 span{
font-size: 65%;
display: block;
}
#intro p{
text-align: center;
font-family: "Noto Serif JP", serif;
}
#intro p.copy{
padding-bottom: 10px;
font-weight: 600;
font-size: 145%;
}
#intro p.copy-1{
font-weight: 600;
font-size: 125%;
}
.color-bar {
display: block;
width: 60px;          /* 横幅 */
height: 3px;         /* 線の太さ（自由に変更可） */
margin: 0 auto;
/* 左から右へ色を指定 */
background: linear-gradient(
to right, 
#1C356E 0,   #1C356E 20px,
#CC184E 20px,  #CC184E 40px,
#E2BC37 40px,  #E2BC37 60px  
);
}
/*--------------------info */
#info{
padding: 50px 0;
}
#info h6{
text-align: center;
color: #ff3058;
font-weight: 700;
font-size: 120%;
padding-bottom: 20px;
}
#info p.info_p{
display: block;
text-align: center;
font-weight: 500;
}
#info p.info_sp_p{
display: none;
}
.image-box{
background: linear-gradient(180deg, #fff 0%, #fff 50%, #f5f5f5 50%, #f5f5f5 100%);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
}
.image{
display: block;
width: 800px;
margin: 0 auto;
}
.image_sp{
display: none;
}
.image-box img{
width: 100%;
height: 225px;
object-fit: cover;
border-radius: 25px;
}
/*--------------------seat */
#seat{
padding: 60px 0;
background: #f5f5f5;
}
#seat p.catchphrase span{
display: inline;
}
#seat ul,#seat dl{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#seat ul li img,
#seat dl dt img{
width: 100%;
}
#seat dl dt img{
height: 300px;
object-fit: cover;
}
#seat dl dt img.image-2{
object-position: center -10px;
}
#seat ul li{
width: calc(100% / 2 - 1%);
text-align: right;
line-height: 1.2em;
font-size: 90%;
padding-bottom: 10px;
}
#seat dl{
padding-bottom: 40px;
}
#seat dl dt{
width: calc(100% / 3 - 1%);
text-align: right;
font-size: 90%;
}
#seat h6,
#inflight-meal h6{
font-family: "Noto Serif JP", serif;
font-size: 130%;
padding-bottom: 15px;
}
/*--------------------inflight-meal */
#inflight-meal{
padding: 50px 0;
}
#inflight-meal ul,
#lounge ul{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#inflight-meal ul li{
width: calc(100% / 3 - 1%);
text-align: right;
line-height: 1.2em;
font-size: 90%;
padding-bottom: 40px;
}
#inflight-meal ul li img,
#lounge ul li img{
width: 100%;
}
/*--------------------lounge */
#lounge{
padding: 50px 0;
background: url("../img/bg_pastel.jpg");
background-size: cover;
background-repeat: no-repeat;
}
p.catchphrase a{
display: block;
color: #FF3058;
font-size: 90%;
}
p.catchphrase a span{
display: inline;
}
#lounge p.catchphrase{
padding-bottom: 25px;
}
#lounge ul li{
width: calc(100% / 2 - 1%);
text-align: right;
line-height: 1.2em;
font-size: 90%;
padding-bottom: 50px;
}
.flex-container {
display: flex;
/* 折り返しを許可 */
flex-wrap: wrap;
/* 隙間 */
gap: 20px;
}
.box {
/* 隙間がある場合、単純な50%だと落ちてしまうので計算が必要 */
width: calc(50% - 10px); /* (100% / 2) - (gap / 2) */
padding: 0;
}
.box dl{
padding-bottom: 20px;
}
.box dl dt{
font-family: "Noto Serif JP", serif;
font-size: 125%;
font-weight: 700;
padding-bottom: 20px;
line-height: 1.2em;
}
.box dl dt span{
font-family: "Hurricane", cursive;
padding-right: 12px;
font-size: 300%;
font-weight: 500;
color: #FF3058;
}
/*--------------------tour button */
#tour_sp{
display: none;
}
#tour{
display: block;
padding: 50px 0;
}
#tour a {
background: #FF3058;
border-radius: 30px;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
max-width: 800px;
padding: 10px 0;
color: #fff;
text-decoration: none;
transition: 0.3s /*ease-in-out*/;
font-weight: 500;
font-size: 105%;
letter-spacing: 0.06em;
}
#tour a:hover {
background: #fff;
color: #FF3058;
border: 2px solid #FF3058;
}
#tour a:after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 50%;
right: 20px;
border-radius: 1px;
transition: 0.3s /*ease-in-out*/;
}
#tour a:hover:after {
border-color: #FF3058;
}