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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@font-face {font-family: 'Oriya MN'; src: url('../font/oriya-mn.woff2') format('woff2'),url('../font/oriya-mn.ttf') format('truetype'); font-weight: normal; font-style: normal;}

/* ======================================================================================

    reset

====================================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, article, section { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }

img{vertical-align:middle; width:100%; height:auto;}
@media only screen and (max-width:840px) {
.imgSP{padding-left: 15%; padding-right: 15%;}
}

html,body{height: 100%;}

body{
position: relative;
font-size:16px;
line-height: 200%;
color:#000;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
background: url("../img/bg_pc1.jpg") center center no-repeat; background-size: cover; background-attachment: fixed;
}

body.page-faq,
body.page-faq_en{background: #fff;}

body.page-en main,
body.page-faq_en main{font-family: "brandon-grotesque", sans-serif; font-weight: 400; font-size: 120%;}

@media only screen and (max-width:840px) {
body{
font-size:15px;
background: url("../img/bg_sp1.jpg") center center no-repeat; background-size: cover; background-attachment: fixed;}
}

a,a img,a:hover img,li,li:hover,a::after,a:hover::after,a::before,a:hover::before,input,input:hover,.trigger,.trigger:hover,i{-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}

a:link {text-decoration:none; color:#000;}
a:visited {text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#3F3F3F;}

a:hover img{opacity:0. 8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )";}

p{margin:0; padding:0;}

h1,h2,h3,h4,h5{font-weight:300; margin:0; padding:0; position: relative; width: 100%; line-height: 1;}

td,li,dt,dd{position: relative;}

/* 共通：アニメーション前の基本状態 */
.fade-el {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
}

/* 下から上に10px移動 */
.fade-up {
    transform: translateY(30px);
}

/* その場でフェードイン */
.fade-in {
    transform: translateY(0);
}

/* 左から右に10px移動 */
.fade-left {
    transform: translateX(-20px);
}

/* JavaScriptで付与する「表示状態」のクラス */
.is-visible {
    opacity: 1;
    transform: translate(0, 0); /* 位置を元に戻す */
}


.inner{max-width: 1440px; padding-left: 25px; padding-right: 25px; margin-left: auto; margin-right: auto; position: relative;}

/* == Reservation == */
.ReservationBox{position: fixed; right: 60px; bottom: 60px; width: 350px; z-index: 1;}
.ReservTitle{font-family: Oriya MN; font-size: 26px; line-height: 40px; display: block;}

a.ReservationBt{border: #ffffff solid 1px; border-radius: 500px; padding: 18px 32px 18px 0; display: block; text-align: center; color: #fff; text-decoration: none; font-size: 13px; background: url("../img/bg_bt.jpg")center center no-repeat; background-size: cover; position: relative;}
a.ReservationBt:hover,
a.ReservationBt:visited{color: #fff;}
a.ReservationBt::after{position: absolute; content: ""; background: url("../img/icon.svg") no-repeat; background-size: 48px; width: 48px; height: 48px; right: 20px; top: 50%; transform: translate(0,-50%); transition: all  0.3s ease;}
a.ReservationBt:hover::after{right: 15px; transition: all  0.3s ease;}


/* == MainVisual == */

.MainVisual {height: 100vh; background: url("../img/bg_pc2.jpg") center center no-repeat; background-size: cover;}
.MainVisual .inner{height: 100%; position: relative;}
.MainVisual .inner .logo{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-40%); max-width: 164px; height: auto;}
.MainVisual .inner nav{position: absolute; left: 200px; top: 50%; transform: translate(0,-50%); font-family: "brandon-grotesque", sans-serif; font-weight: 400; font-size: 18px; color: #fff;}
.MainVisual .inner nav a{color: #fff; display: block; position: relative;}
.MainVisual .inner nav a:hover{color: #fff;}
.MainVisual .inner nav a:hover::after{content: "・"; position: absolute; left: -30px; top: 50%; transform: translate(0,-50%);}
.MainVisual .inner nav ul li{margin-bottom: 28px; position: relative;}
.MainVisual .inner nav ul li:last-child{margin-bottom: 0px;}

.submenu {padding: 30px 0; margin: 0; position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;}
.submenu.active {opacity: 1; visibility: visible; transform: translateY(0);}
.submenu li {padding-left: 30px; margin: 0; position: relative;}
.submenu li i{position: absolute; left: 0; top: 50%; transform: translate(0,-50%); font-size: 80%;}

a.Scroll{position: absolute; left: 50%; bottom: 30px; transform: translate(-50%,0); text-align: center; display: inline-block; font-size: 1rem; color: #fff; font-family: Oriya MN;}
a.Scroll:hover{text-decoration: none; color: #E2E2E2;}
a.Scroll::after{content: ""; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; left: 50%; bottom: -15px; transform: translate(-50%,0);}


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

.MainVisual .inner .logo{max-width: 140px;}
.ReservationBox{position: fixed; left: 50%; width: 250px; z-index: 1; transform: translate(-50%,0);}
.ReservTitle{font-size: 18px; line-height: 20px;}

a.ReservationBt{padding: 10px 18px 10px 0; font-size: 12px;}
a.ReservationBt:hover,
a.ReservationBt:visited{color: #fff;}
a.ReservationBt::after{position: absolute; content: ""; background: url("../img/icon.svg") no-repeat; background-size: 38px; width: 38px; height: 38px; right: 10px; top: 50%; transform: translate(0,-50%); transition: all  0.3s ease;}
a.ReservationBt:hover::after{right: 5px; transition: all  0.3s ease;}

.MainVisual .inner nav{display: none;}
}



/* == header == */
.header .inner{position: relative; height: 90px;}
.header .logo{width: 147px; position: absolute; left: 80px; top: 50%; transform: translate(0,-50%);}

@media only screen and (max-width:840px) {
.header .inner{height: 55px;}
.header .logo{width: 109px; left: 20px;}
}

.header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;

            background-color: rgba(255, 255, 255, 0.4);
            color: #404144;

            padding: 0 20px;
            box-sizing: border-box;
            z-index: 1000;
            
            /* 出現時のフェードと、背景色の変化を滑らかにする設定 */
            opacity: 0;
            visibility: hidden;
            transition: 
                opacity 0.5s ease, 
                visibility 0.5s ease, 
                background-color 0.4s ease; /* 背景色の変化をフェードさせる */
        }

        /* スクロール後に出現するクラス */
        .header.is-active {
            opacity: 1;
            visibility: visible;
        }

        /* メニュー展開時の背景色: 透明度 94% */
        .header.menu-opened {
            background-color: rgba(255, 255, 255, 0.94);
        }



        /* --- ハンバーガーアイコン --- */
        .menu-trigger {
            position: absolute;
			right: 70px;
			top: 50%; transform: translate(0,-50%);
            width: 30px;
            height: 24px;
            cursor: pointer;
        }


        .menu-trigger span {
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #404144; /* 指定のカラー */
            transition: all 0.4s;
        }

        .menu-trigger span:nth-child(1) { top: 0; }
        .menu-trigger span:nth-child(2) { top: 11px; }
        .menu-trigger span:nth-child(3) { top: 22px; }

        .menu-trigger.is-open span:nth-child(1) { transform: translateY(11px) rotate(-45deg); }
        .menu-trigger.is-open span:nth-child(2) { opacity: 0; }
        .menu-trigger.is-open span:nth-child(3) { transform: translateY(-11px) rotate(45deg); }

        /* --- アコーディオンメニュー --- */
        .nav-menu {
            position: fixed;
            top: 90px;
            right: 0;
            width: 100%;
            /* メニュー内の背景もヘッダーに合わせる */
            background-color: rgba(255, 255, 255, 0.94);
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.4s ease-out;
            z-index: 999;
        }

        .nav-menu.is-open {
            max-height: 350px;
        }

        .nav-menu ul {
		text-align: center;
            list-style: none;
            padding: 0;
            margin: 0;
			font-weight: 400;
			font-family: "brandon-grotesque", sans-serif;
        }


        .nav-menu li a {
            display: block;
            padding: 20px;
            color: #404144; /* 指定のカラー */
            text-decoration: none;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            letter-spacing: 0.05em;
        }
		
		.nav-menu .Language{display: flex; flex-wrap: nowrap; justify-content: center;}
		.nav-menu .Language li{padding: 0 10px;}
		.nav-menu .Language li a{border: 0;}
		.nav-menu .Language li span{padding: 20px; display: block;}
		.nav-menu .Language li i{margin-right: 5px; font-size: 80%;}





/* --- 既存のスタイルに追加 --- */

@media only screen and (max-width: 840px) {
    /* 1. trigger-section内にいる時（is-activeがない時）の初期状態 */
    .header {
        opacity: 1 !important;    /* 常に構造体は見せる */
        visibility: visible !important;
        background-color: transparent; /* 背景は透明 */
    }

    /* 2. ロゴと背景はデフォルトで非表示（is-activeもmenu-openedもない時） */
    .header .logo {
        opacity: 0;
        transition: opacity 0.4s;
    }

    /* 3. ハンバーガーメニューを白くする（初期状態） */
    .menu-trigger span {
        background-color: #fff; /* 白色 */
    }

    /* 4. 【重要】スクロール後、またはメニューが開いている時は表示する */
    .header.is-active,
    .header.menu-opened {
        background-color: rgba(255, 255, 255, 0.94);
    }

    .header.is-active .logo,
    .header.menu-opened .logo {
        opacity: 1;
    }

    /* 5. スクロール後、またはメニューが開いている時はハンバーガーをグレーにする */
    .header.is-active .menu-trigger span,
    .header.menu-opened .menu-trigger span {
        background-color: #404144;
    }

    /* 6. ナビゲーションメニューのTOP位置調整（スマホ用高さに合わせる） */
    .nav-menu {
        top: 55px; 
    }
}

/* PC時の設定に追記 */
@media only screen and (min-width: 841px) {
    /* ヘッダーが非表示の時は、ナビメニューも強制的に非表示にする */
    .header:not(.is-active) + .nav-menu, 
    .header:not(.is-active) ~ .nav-menu {
        max-height: 0 !important;
    }
}

@media only screen and (max-width:840px) {
.menu-trigger {right: 20px; width: 30px; height: 24px;}
.nav-menu {top: 55px;}
}

h2.Heading_JP_1{font-family: ten-mincho, serif; font-style: normal; font-weight: 400; font-size: 48px; line-height: 60px; margin-bottom: 60px; text-align: center;}
h2.Heading_JP_2{font-family: ten-mincho, serif; font-style: normal; font-weight: 400; font-size: 28px; margin-bottom: 30px; margin-top: 80px;}
h2.Heading1{font-family: "Oriya MN"; font-size: 48px; line-height: 60px; margin-bottom: 60px;}
h2.Heading2{font-family: "Oriya MN"; font-size: 28px; line-height: 40px; margin-bottom: 60px; color: #fff}

h2.Heading1 .SpFontSize1{font-family: "Oriya MN"; font-size: 48px; line-height: 60px; margin-bottom: 60px;}


@media only screen and (max-width:840px) {
h2.Heading1{font-size: 42px;}
h2.Heading1 .SpFontSize1{font-size: 24px;}
}

section.About{text-align: center;}
section.About .inner{padding-top: 180px; padding-bottom: 180px; line-height: 1.6;}

@media only screen and (max-width:840px) {
section.About .inner{padding-top: 80px; padding-bottom: 80px;}
}

section.Lounge .inner{max-width: 1040px; padding-top: 240px; padding-bottom: 200px; display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: #ccc solid 1px;}
section.Lounge .TxtArea{flex: 1;}
section.Lounge .PhotoArea{width: 465px; padding-right: 65px;}

@media only screen and (max-width:840px) {
section.Lounge .inner{padding: 80px 0 100px; border-bottom: #ccc solid 1px;}
section.Lounge .TxtArea{width: 100%; padding: 0 20px 50px 20px;}
section.Lounge .PhotoArea{width: 100%; padding-right: 0;}
}


section.Room .inner{max-width: 100%; padding:200px 0;}
section.Room .PhotoArea{max-width: 800px; margin-left: auto; margin-right: auto;}
section.Room h2.Heading1{margin-bottom: 30px;}

.Roomh2{max-width: 1040px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}

.PopUpInner{display: flex; flex-wrap: wrap; justify-content: space-between;}
.PopUpInner .PhotoArea{width: 54%;}
.PopUpInner .PhotoArea ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.PopUpInner .PhotoArea ul li.Img100{width: 100%; margin-bottom: 20px;}
.PopUpInner .PhotoArea ul li.Img_s{width: 31%;}
.PopUpInner .TxtArea{width: 38%;}
.PopUpInner .TxtArea h3{font-weight: 700; font-size: 24px; line-height: 180%;}
.PopUpInner .TxtArea dl{font-size: 14px;}
.PopUpInner .TxtArea dl dd{margin-bottom: 20px; padding-bottom: 20px; border-bottom: #E2E4E9 solid 1px;}
.PopUpInner .TxtArea dl dd:last-child{margin-bottom: 0; border: 0;}

@media only screen and (max-width:840px) {
.PopUpInner{max-height: 500px; overflow-y: scroll;}
.PopUpInner .PhotoArea,
.PopUpInner .TxtArea{width: 100% !important;}
}



section.Info{background: #fff;}
section.Info .inner{max-width: 1040px; padding-top: 200px; padding-bottom: 200px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
section.Info .TxtArea{width: 38%; padding-right: 25px;}
section.Info .MapArea{width:60%;}

section.Info .MapArea .GoogleMap{width:100%; aspect-ratio: 16 / 9; filter: grayscale(100%) contrast(0.8) brightness(1.2); -webkit-filter: grayscale(100%) contrast(0.8) brightness(1.2); border: 0;}

section.Info dl{margin-bottom: 25px;}
section.Info dl dt{font-weight: 400;}
section.Info dl dd{margin-bottom: 20px;}
section.Info dl dd:last-child{margin-bottom: 0px;}


section.Info .LogoArea{text-align: center; margin-bottom: 25px;}
section.Info .LogoArea img{width: 25%;}

a.bt01{font-weight: 400; display: inline-block; padding-right: 40px; position: relative;}
a.bt01::after{position: absolute; content: ""; background: url("../img/icon_bt01.svg") no-repeat; background-size: 24px; width: 24px; height: 24px; right: 5px; top: 50%; transform: translate(0,-50%); transition: all  0.3s ease;}
a.bt01:hover::after{right: 0px; transition: all  0.3s ease;}

a.bt03{border: #ffffff solid 1px; border-radius: 500px; padding: 0px 40px 0px 20px; display: inline-block; text-align: center; color: #fff; text-decoration: none; background: url("../img/bg_bt.jpg")center center no-repeat; background-size: cover; position: relative;}
a.bt03:hover,
a.bt03:visited{color: #fff;}
a.bt03::after{position: absolute; content: "＞"; right: 10px; top: 50%; transform: translate(0,-50%); transition: all  0.3s ease; font-size: 10px;}
a.bt03:hover::after{right: 5px; transition: all  0.3s ease;}


@media only screen and (max-width:840px) {
section.Info .TxtArea{width: 100%; padding-right: 0px; margin-bottom: 50px;}
section.Info .MapArea{width:100%;}
}


section.Insta{background: url("../img/bg_pc2.jpg") center center no-repeat; background-size: cover; background-attachment: fixed;}
section.Insta .inner{max-width: 1040px; padding-top: 200px; padding-bottom: 200px;}


section.About .PhotoArea,
section.FaqPhotoArea{background: url("../img/photo01.jpg") center center no-repeat; background-size: cover; height: 570px;}

section.Insta ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
section.Insta ul li{aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 15px; background: #666;}
section.Insta ul li.Insta1,
section.Insta ul li.Insta2{width: 50%;}
section.Insta ul li.Insta3,
section.Insta ul li.Insta4,
section.Insta ul li.Insta5,
section.Insta ul li.Insta6{width: 23.5%;}

@media only screen and (max-width:840px) {
section.Insta .inner{padding-top: 100px; padding-bottom: 100px;}
section.Insta{background: url("../img/bg_sp2.jpg") center center no-repeat; background-size: cover; background-attachment: fixed;}
section.Insta ul li.Insta1,
section.Insta ul li.Insta2{width: 100%;}
section.Insta ul li.Insta3,
section.Insta ul li.Insta4,
section.Insta ul li.Insta5,
section.Insta ul li.Insta6{width: 47%;}
}

header.FAQheader{height: 76px; position: relative;}
header.FAQheader a.bt02{font-weight: 400; padding-left: 40px; position: absolute; left: 3%; bottom: 0}
header.FAQheader a.bt02::after{content: ""; position: absolute; background: url("../img/icon_bt02.svg") no-repeat; background-size: 10px; width: 10px; height: 18px; left: 5px; top: 50%; transform: translate(0,-50%); transition: all  0.3s ease;}
header.FAQheader a.bt02:hover::after{left: 0px; transition: all  0.3s ease;}

section.Faq .inner{padding-top: 200px; padding-bottom: 200px; max-width: 800px;}
section.Faq .Heading1{text-align: center;}
section.Faq a{text-decoration: underline;}

.FaqNav {display: flex; flex-wrap: wrap; gap: 10px;/* ボタン同士の間隔 */ list-style: none; padding: 0; margin: 20px 0;}
.FaqNav li {margin: 0;}
.FaqNav li a {display: inline-flex; align-items: center; text-decoration: none; padding: 8px 16px; border-radius: 500px; font-size: 12px; background-color: #D1E9FF; color: #1A5276; transition: opacity 0.2s ease;}
.FaqNav li a::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #1A5276; /* 文字と同じ青色 */
  vertical-align: middle;
}

/* ホバー時の挙動 */
.FaqNav li a:hover {
  opacity: 0.8;
}

h2.Heading3{font-weight: 700; line-height: 160%; font-size: 28px; margin-bottom: 30px;}


.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
	color: #5D5E62;
  }

  .faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .faq-question::after {
    content: "＋";
    transition: transform 0.3s;
  }

  .faq-question.open::after {
    content: "−";
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    padding-left: 16px;
	white-space: pre-wrap;
  }

  .faq-answer p {
    margin: 8px 0 0;
  }

  .faq-answer.open {
    opacity: 1;
  }
  
  
  
  
  
footer{font-size: 14px; background: url("../img/bg_pc2.jpg") center center no-repeat; background-size: cover; color: #fff;}
footer a,
footer a:visited,
footer a:active{color: #fff !important;}
footer a:hover{color: #fff !important; opacity: .8;}
footer .inner{padding-top: 40px; padding-bottom: 20px;}
.FooterSection1{margin-bottom: 50px;}
.FooterSection1 .FooterHeading{font-size: 100%; font-weight: 700; margin-bottom: 5px;}
.FooterSection1 a::before{content: ">>";}

.FooterSection2{margin-bottom: 50px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.FooterSection2 ul{width: 32%;}
.FooterSection2 .FooterHeading{font-size: 18px; font-family: Oriya MN; border-bottom: #fff solid 1px;}

.FooterSection3{margin-bottom: 150px; display: flex; flex-wrap: wrap;}
.FooterSection3 .LogoArea{width: 220px; text-align: center;}
.FooterSection3 .LogoArea img{width: 40%;}
.FooterSection3 .FooterHeading{font-size: 18px; font-family: Oriya MN;}
.FooterSection3 .PoricyArea{font-size: 85%; padding-left: 10%;}
.FooterSection3 .ForArea{font-size: 85%; padding-left: 10%;}

@media only screen and (max-width:840px) {
.FooterSection1{margin-bottom: 30px;}
.FooterSection2 ul{width: 100%; margin-bottom: 40px;}

.FooterSection3 .LogoArea{width: 100%;}
.FooterSection3 .LogoArea img{width: 20%; margin-bottom: 25px;}

.FooterSection3 .PoricyArea{width: 100%; padding-left: 0px;}
.FooterSection3 .ForArea{width: 100%; padding-left: 0px;}
}

/* ======================================================================================

    other

====================================================================================== */


@media only screen and (min-width:841px) {
	
.pc{display:block;}
.sp{display:none;}


.res10{width:10%;}
.res11{width:11%;}
.res12{width:12%;}
.res13{width:13%;}
.res14{width:14%;}
.res15{width:15%;}
.res16{width:16%;}
.res17{width:17%;}
.res18{width:18%;}
.res19{width:19%;}
.res20{width:20%;}
.res21{width:21%;}
.res22{width:22%;}
.res23{width:23%;}
.res24{width:24%;}
.res25{width:25%;}
.res26{width:26%;}
.res27{width:27%;}
.res28{width:28%;}
.res29{width:29%;}
.res30{width:30%;}
.res31{width:31%;}
.res32{width:32%;}
.res33{width:33%;}
.res34{width:34%;}
.res35{width:35%;}
.res36{width:36%;}
.res37{width:37%;}
.res38{width:38%;}
.res39{width:39%;}
.res40{width:40%;}
.res41{width:41%;}
.res42{width:42%;}
.res43{width:43%;}
.res44{width:44%;}
.res45{width:45%;}
.res46{width:46%;}
.res47{width:47%;}
.res48{width:48%;}
.res49{width:49%;}
.res50{width:50%;}
.res51{width:51%;}
.res52{width:52%;}
.res53{width:53%;}
.res54{width:54%;}
.res55{width:55%;}
.res56{width:56%;}
.res57{width:57%;}
.res58{width:58%;}
.res59{width:59%;}
.res60{width:60%;}
.res61{width:61%;}
.res62{width:62%;}
.res63{width:63%;}
.res65{width:65%;}
.res66{width:66%;}
.res67{width:67%;}
.res68{width:68%;}
.res69{width:69%;}
.res70{width:70%;}
.res71{width:71%;}
.res72{width:72%;}
.res73{width:73%;}
.res74{width:74%;}
.res75{width:75%;}
.res76{width:76%;}
.res77{width:77%;}
.res78{width:78%;}
.res79{width:79%;}
.res80{width:80%;}
.res81{width:81%;}
.res82{width:82%;}
.res83{width:83%;}
.res84{width:84%;}
.res85{width:85%;}
.res86{width:86%;}
.res87{width:87%;}
.res88{width:88%;}
.res89{width:89%;}
.res90{width:90%;}
}



@media only screen and (max-width:840px) {
	
.pc{display:none;}
.sp{display:block;}

.res10,.res11,.res12,.res13,.res14,.res15,.res16,.res17,.res18,.res19,.res20,.res21,.res22,.res23,.res24,.res25,.res26,.res27,.res28,.res29,.res30,.res31,.res32,.res33,.res34,.res35,.res36,.res37,.res38,.res39,.res40,.res41,.res42,.res43,.res44,.res45,.res46,.res47,.res48,.res49,.res50,.res51,.res52,.res53,.res54,.res55,.res56,.res57,.res58,.res59,.res60,.res61,.res62,.res63,.res64,.res65,.res66,.res67,.res68,.res69,.res70,.res71,.res72,.res73,.res74,.res75,.res76,.res77,.res78,.res79,.res80,.res81,.res82,.res83,.res84,.res85,.res86,.res87,.res88,.res89,.res90{width:100%; margin-bottom:10px;}

}



/*--------共通--------*/


.photo_l{float:left; margin:0 10px 10px 0;}
.photo_r{float:right; margin:0 0px 10px 10px;}

.box_l{float:left;}
.box_r{float:right;}
.box_c{margin:0 auto;}

.txt_r{text-align:right;}
.txt_l{text-align:left;}
.txt_c{text-align:center;}

.block{display:block;}
.overflow{overflow:hidden;}
.cl{clear:both;}

.img_b5 img{margin-bottom:5px;}
.img_b10 img{margin-bottom:10px;}

.w10{width:10%;}
.w15{width:15%;}
.w20{width:20%;}
.w25{width:25%;}
.w30{width:30%;}
.w35{width:35%;}
.w40{width:40%;}
.w45{width:45%;}
.w50{width:50%;}
.w55{width:55%;}
.w60{width:60%;}
.w65{width:65%;}
.w70{width:70%;}
.w75{width:75%;}
.w80{width:80%;}
.w85{width:85%;}
.w90{width:90%;}

.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}

.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb80{margin-bottom:80px !important;}

.mtb5{margin:5px 0 !important;}
.mtb10{margin:10px 0 !important;}
.mtb15{margin:15px 0 !important;}
.mtb20{margin:20px 0 !important;}

.ptb5{padding:5px 0 !important;}
.ptb10{padding:10px 0 !important;}
.ptb15{padding:15px 0 !important;}
.ptb20{padding:20px 0 !important;}

.mr3{margin-right:3px !important;}
.mr4{margin-right:4px !important;}
.mr5{margin-right:5px !important;}
.mr6{margin-right:6px !important;}
.mr7{margin-right:7px !important;}
.mr8{margin-right:8px !important;}
.mr9{margin-right:9px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}

.f70per{font-size:70%}
.f80per{font-size:80%}
.f90per{font-size:90%}
.f110per{font-size:110%}
.f120per{font-size:120%}
.f130per{font-size:130%}
.f140per{font-size:140%}
.f150per{font-size:150%}
.f160per{font-size:160%}
.f170per{font-size:170%}
.f180per{font-size:180%}




.memo{font-size:85%; line-height: 1.5;}

.movie-wrap {position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden;}
.movie-wrap iframe {position: absolute; top: 0; left: 0; width:100%; height:100%;}

#page-top{position: fixed; bottom: 30px; right: 30px; z-index:20;}
#page-top{width: 50px; height: 50px; border: #fff solid 0px; border-radius: 500rem; opacity: .5; background: rgba(160,0,0,1)}
#page-top:hover{opacity: 1;}
#page-top::before{content: 'Back'; width: 100%; text-align: center; font-size: .7rem; color: #fff; position: absolute; left: 0; bottom: 5px; margin: auto;}
#page-top::after{
content: "";
position: absolute;
right: 0px;
left: 0px;
width: 0px;
height: 0px;
top: 7px;
margin: auto;
border-style: solid;
border-color: transparent transparent #fff transparent ;
border-width: 0px 6px 10px 6px;}