@charset "utf-8";


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}li{list-style:none}
a { color: #333; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none;}
a:hover { color: #b41a1d;}


/*LAYOUT*/
/*******************************************************************/
body { width: 100%; font-family: Arial, Helvetica, sans-serif;}
body { font-size: 13px; line-height: 1; color: #333;}
#container { width: 100%; overflow: hidden;}
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4, html[lang="ja"] #tabs { font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] #tabs { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal;}
html[lang="zh-tw"] h1, html[lang="zh-tw"] h2, html[lang="zh-tw"] h3, html[lang="zh-tw"] h4, html[lang="zh-tw"] #tabs { font-family: 'SimSun', 'Hei', serif;}
html[lang="zh-cn"] h1, html[lang="zh-cn"] h2, html[lang="zh-cn"] h3, html[lang="zh-cn"] h4, html[lang="zh-cn"] #tabs { font-family: 'SimSun', serif;}
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4, html[lang="ko"] #tabs { font-family: 'Gungsuh', 'Batang', serif;}
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4, html[lang="th"] #tabs { font-family: serif;}
html[lang="vi"] h1, html[lang="vi"] h2, html[lang="vi"] h3, html[lang="vi"] h4, html[lang="vi"] #tabs { font-family: serif;}
html[lang="id"] h1, html[lang="id"] h2, html[lang="id"] h3, html[lang="id"] h4, html[lang="id"] #tabs { font-family: serif;}


/*HEADER*/
/*******************************************************************/
#header { position: relative;}
#slide:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 46px; background: url(../images/header.png) center 0 no-repeat; background-size: 100% 46px; z-index: 0;}
#slide { height: 540px;}
.sp-slides { display: none;}
.sp-slide img { width: 100%; height: auto;}
#catch { margin-top: 30px; text-align: center; line-height: 1.2; color: #b41a1d;}
#slide #catch { display: none; position: absolute; top: 35%; left: 0; right: 0; bottom: auto; margin: auto; text-shadow: 0 0 1px rgba(0,0,0,1.00), 0 0 4px rgba(0,0,0,1.00), 0 0 10px rgba(0,0,0,1.00); color: #FFF; z-index: 30; pointer-events: none;}
#catch h1 { font-size: 50px;}
#catch h2 { font-size: 20px;}
#header p { width: 100%; max-width: 1000px; margin: 20px auto; padding: 0 20px; line-height: 1.7;}
#nav { width: 100%; margin: 20px auto; padding-right: 160px;}
#nav > ul { display: table; width: 100%;}
#nav > ul li { display: table-cell; text-align: center; vertical-align: middle; border-left: #999 solid 1px;}
#nav > ul li:first-child { border-left: none;}
#nav > ul li a { display: inline-block; padding: 5px 10px 10px; background: url("../images/arr_b.png") center bottom no-repeat; font-weight: bold;}
#lang { position: absolute; top: 0; right: 10px;}
#lang label { padding: 8px 0 8px 28px; background: #dadee0 url("../images/language.png") 8px center no-repeat; background-size: 16px 16px; border-radius: 4px;}
#lang select { padding: 8px;}
#lang select option { padding: 4px;}
#sns { text-align: center;}
#sns > div { display: inline-block;}
#bread { padding: 30px 20px; text-align: center;}
.sp { display: none!important;}
#open { display: none;}


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; padding: 25px 0;}
#footer p { padding: 5px 0; text-align: center; font-size: 11px;}
#pagetop { display: none; position: fixed; right: 20px; bottom: 20px;}
#pagetop a { display: block; font-size: 50px; color: #B41A1D;}


/*CONTENTS*/
/*******************************************************************/
.article { padding: 90px 0;}
.article h3 { margin-bottom: 20px; font-size: 30px; color: #B41A1D;}
.article h4 { font-size: 22px;}
.article h5 { font-size: 22px;}
.article h5 span { display: block; padding-top: 8px; font-size: 13px; font-weight: normal; color: #666;}
.in { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px;}
.in p { padding-bottom: 20px; line-height: 1.7;}

#flower { padding: 40px 0 0; text-align: center;}
#flower h3 { display: inline-block; margin-bottom: 0; padding: 40px 120px; background: url("../images/flower1.png") left bottom no-repeat, url("../images/flower2.png") right bottom no-repeat;}
#flower div { background: url("../images/bg1.png") 0 0 repeat;}

#where { background: url("../images/bg2.png") 0 0 repeat;}
#where h3 { padding: 10px 0 10px 60px; background: url("../images/camera.png") 0 center no-repeat;}
#tabs { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-end; align-items: flex-end;}
#tabs li { width: 24%;}
#tabs li a { display: block; padding: 10px; text-align: center; background: #e68994; border-radius: 6px 6px 0 0; font-size: 24px; color: #FFF; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
#tabs li a:hover, #tabs li a.active { padding: 20px 10px;}
#tabcontent > div { padding: 20px; background: #e68994; border-radius: 0 0 6px 6px;}
#tabs li:nth-child(2) a, #tabcontent > div:nth-child(2) { background: #009d50;}
#tabs li:nth-child(3) a, #tabcontent > div:nth-child(3) { background: #dc7300;}
#tabs li:nth-child(4) a, #tabcontent > div:nth-child(4) { background: #61a2e3;}
#tabcontent ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;}
#tabcontent ul > li { position: relative; width: 32%; background: #FFF; box-shadow: 0 0 4px rgba(0,0,0,.4); border-radius: 6px;}
#tabcontent ul > li a { display: block;}
#tabcontent ul > li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
#tabcontent ul > li a:hover { color: #5a75a4;}
#tabcontent ul > li a:hover::before { box-shadow: inset 0 0 0 10px rgba(200,200,200,.5);}
#tabcontent ul li img { width: 100%; border-radius: 6px 6px 0 0;}
#tabcontent ul li h4 { padding: 20px 20px 5px;}
#tabcontent ul li ol { padding: 0 20px 20px;}
#tabcontent ul li ol li { padding: 15px 0 15px 15px; background: url("../images/arr.png") 0 center no-repeat; border-bottom: 1px dashed #CCC;}
.more { text-align: center; padding-bottom: 15px;}
.more span { display: inline-block; padding: 5px 25px; text-align: center; background: #B41A1D; border-radius: 4px; color: #FFF;}
.comingsoon { padding: 80px; text-align: center; font-size: 24px; color: #FFF;}

#seasons { background: url("../images/seasons.jpg") center center no-repeat; background-size: cover;}
#seasons .in { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; justify-content: space-between; padding: 5px; background: #FFF; border-radius: 6px; box-shadow: 0 0 10px rgba(0,0,0,.2);}
#seasons .contents { width: 480px;}
#seasons .contents:first-child { padding-left: 30px;}
#seasons h3 { padding: 10px 0 10px 60px; background: url("../images/plane.png") 0 center no-repeat;}
#seasons h3 span { display: block; padding-bottom: 8px; font-size: 16px;}
#seasons .sp-slide img { border-radius: 6px;}

#hashtag { margin-bottom: 20px; padding: 30px; text-align: center; background: url("../images/bg3.jpg") center center no-repeat; background-size: cover; border-radius: 6px;}
#hashtag h3 { padding-top: 60px; background: url("../images/insta.png") center top no-repeat; color: #FFF;}
#hashtag a { display: inline-block; padding: 5px 20px; background: #FFF; border-radius: 6px; font-size: 20px; font-weight: bold; color: #b41a1d;}
#hashtag a:hover { background: #b41a1d; color: #FFF;}
#flower_central_japan { display: table; table-layout: fixed; width: 100%;}
#flower_central_japan li { display: table-cell; text-align: center;}
#flower_central_japan li img { width: 90%; height: auto; border: #CCC solid 1px; border-radius: 6px;}

.article .title { margin-bottom: 40px; padding: 30px 20px; text-align: center; background-position: center center; background-repeat: no-repeat; background-size: cover; font-size: 48px; color: #FFF; text-shadow: 0 0 4px rgba(0,0,0,.5), 0 0 4px rgba(0,0,0,1); box-shadow: 0 0 4px rgba(0,0,0,.4);}
#spring { background: url("../images/bg_spring.png") 0 0 repeat;}
#spring .title { background-image: url("../images/spring.jpg");}
#summer { background: url("../images/bg_summer.png") 0 0 repeat;}
#summer .title { background-image: url("../images/summer.jpg");}
#autumn { background: url("../images/bg_autumn.png") 0 0 repeat;}
#autumn .title { background-image: url("../images/autumn.jpg");}
#winter { background: url("../images/bg_winter.png") 0 0 repeat;}
#winter .title { background-image: url("../images/winter.jpg");}
.spot figure a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7;}
.spot h4 { display: inline-block; margin-bottom: 30px; padding: 0 20px 5px; font-size: 30px; color: #FFF; text-shadow: 0 0 4px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.2);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.2) 60%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,0.2) 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#33ffffff',GradientType=0 );}
.spot ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 40px;}
.spot ul > li { position: relative; display: flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; width: 32%; background: #FFF; box-shadow: 0 0 4px rgba(0,0,0,.4); border-radius: 6px;}
.spot ul li img { border-radius: 6px 6px 0 0;}
.spot ul li h5 { padding: 20px;}
.spot ul li p { padding: 0 20px 5px;}
.spot ul li ol { margin-top: auto; padding: 0 20px 20px;}
.spot ul li ol li { padding: 15px; background: url("../images/arr.png") 0 center no-repeat; border-bottom: 1px dashed #CCC;}
.lum-lightbox-caption { padding-top: 10px;}


@media only screen and (max-width: 959px){
#slide { height: auto;}
}


@media only screen and (min-width: 768px){
#tabcontent ul li ol li span { display: block;}
}


@media only screen and (max-width: 767px){
#catch { margin-top: 60px;}
#catch h1 { font-size: 20px;}
#catch h2 { font-size: 14px;}

#nav { position: fixed; top: -500px; left: 0; width: 100%; margin: 0; padding: 0; text-align: center; background: #FFF; border-bottom: #999 solid 1px; z-index: 100; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out;}
#nav > ul { display: block; table-layout: auto; border-top: #999 solid 1px;}
#nav > ul li { display: block; text-align: left; border-left: none; border-bottom: #999 solid 1px;}
#nav > ul li a { display: block; width: 100%; padding: 24px; background-position: right 10px center;}
#lang { position: relative; right: auto; display: inline-block; margin: 24px auto;}
.sp { display: inline-block!important;}
#open { display: block; position: fixed; top: 3px; right: 3px; width: 54px; height: 54px; text-align: center; background: #B41A1D; font-size: 11px; font-weight: bold; color: #FFF; cursor: pointer; z-index: 102;}
#open div { position: relative; height: 26px; margin: 10px 10px 3px 10px;}
#open span { position: absolute; left: 0; display: block; width: 34px; height: 4px; background: #FFF; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; transition: .15s ease-in-out;}
#open span:nth-child(1) { top: 0;}
#open span:nth-child(2) { top: 11px;}
#open span:nth-child(3) { top: 22px;}
.open #open span:nth-child(1) { top: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0; left: 50%;}
.open #open span:nth-child(3) { top: 11px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
.open #nav { -moz-transform: translateY(560px); -webkit-transform: translateY(560px); transform: translateY(560px);}

.article { padding: 40px 0;}
.article h3 { font-size: 20px;}

#flower h3 { padding: 0 20px 100px;}

#where .in { padding: 0;}
#where h3 { margin: 0 10px;}
#tabs li a { font-size: 14px;}
#tabcontent > div { border-radius: 0;}
#tabcontent ul { display: block;}
#tabcontent ul > li { width: 100%;}
#tabcontent ul > li + li { margin-top: 20px;}

#seasons { padding: 40px 20px;}
#seasons .in { display: block; padding: 10px;}
#seasons .contents { width: 100%;}
#seasons .contents:first-child { padding: 0;}

#hashtag { padding: 30px 20px;}
#flower_central_japan { display: block; text-align: center;}
#flower_central_japan li { display: inline-block; width: 32.3%; padding: 1%;}
#flower_central_japan li img { width: 100%;}

.article .title { font-size: 40px;}
.spot ul { display: block;}
.spot ul > li { -webkit-flex-direction: row; flex-direction: row; width: 100%; margin-bottom: 20px;}
.spot ul li figure { width: 35%;}
.spot ul li > div { width: 65%;}
.spot ul li img { border-radius: 6px 0 0 0;}
.spot ul li h5 { padding: 15px; font-size: 18px;}
.spot ul li p { padding: 0 15px 15px; line-height: 1.3;}
.spot ul li ol { width: 100%; padding: 0; text-align: center; background: #F5F5F5; border-radius: 0 0 6px 6px;}
.spot ul li ol li { display: inline-block; border-bottom: none; font-size: 12px;}
}


@media print {
#container { width: 1060px;}
}