@charset "UTF-8";

/*======================================================================
  Reset CSS
======================================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, t, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
    display: block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

/*======================================================================
  basic
======================================================================*/
html, body{
    box-sizing: border-box;
    height: 100%;
}

body {
	width: 100%;
    line-height: 1.8;
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 100;
    font-size: 24px;
    color: #ebf5fb;
    -webkit-font-smoothing: antialiased;
}

h2, h2 a,
h2 span {
	font-weight: normal;
	text-align: center;
}

h3, h3 a, h4, h4 a, h4 span, h5, h5 a, h5 span {
	font-weight: normal;
}

p { line-height: 1.8;}

a { text-decoration: none; color: #8c6754}

/* mouseover - opacity */
a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
	transition: opacity 680ms;
}

a span:hover {
	transition: all 500ms 0s ease;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}

a:hover img {
	transform: scale(1.05);
	transition: 680ms;
}

a img {
	transition: 420ms;
}

/*======================================================================
  block class
======================================================================*/

.flexstyle {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	-ms-align-items: center;
	align-items: center;
}

.imgbox {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	overflow: hidden;
	-ms-align-items: center;
	align-items: center;
	justify-content: space-around;
}

.font62 {
    font-size: 62px;
    letter-spacing: 10px;
    text-align: center;
}

.font48 {
    font-size: 48px;
}

.font36 {
    font-size: 36px;
}

.raleway {
	font-family: 'Raleway', sans-serif;
    font-weight: 100;
}

.mincho {
    font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}

.w980 {
    max-width: 980px;
    margin: 0 auto;
}

.imgbox img {
	width: 100%;
	height: auto;
}

.pcnone {
	display: none;
}

.smaonly {
    display: none;
}

/* breadcrumbs */
.breadcrumbs {
	padding: 5px 0 5px 10px;
	font-size: 12px;
}

.breadcrumbs span {
	padding: 0 5px;
}

.breadcrumbs span:first-child {
	padding: 0 5px 0 0;
}

.breadcrumbs span a {
	font-weight: bold;
	color: #5DA6A5;
}

.bluebg {
    background: #913a2b;
}

/*======================================================================
  header
======================================================================*/

header {
    position: relative;
}

.MV {
    height: 100vh;
}

.MV .mvimg {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
}

.MV .mvimg picture {
    width: 100%;
}

.grandopen {
    width: 50%;
    padding: 40px 20px 30px;
    border: 3px solid #fff;
    margin: 0 auto 30px;
}

.MV .font62 {
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
}

.grandopen span {
    display: block;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
}

.grandopen span strong {
    font-size: 18px;
    font-weight: normal;
}

.MV .headbox > span strong {
    font-size: 20px;
}

.headbox {
    padding: 40px 0 0;
}

.mvcatch {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.mvcatch span {
    font-size: 94%;
}

.MV h1 {
    margin: 0 auto;
    width: 16%;
}

/*======================================================================
  main
======================================================================*/

.campaign {
    background: url(images/gray_bg2.jpg) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
    padding-top: 3%;
    padding-bottom: 3%;
}

.campaign h2 {
    padding: 10px;
    font-size: 36px;
    border: 1px solid #fff;
    letter-spacing: 3px;
    margin-bottom: 60px;
    color: #fff;
}

.campaign_menu {
    position: relative;
}

.campaign_menu > p {
    font-size: 32px;
    font-family: didot;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-align: center;
    position: absolute;
    top: -54px;
    right: 0;
    left: 0;
    z-index: 2;
}

.campaign_menu > p span {
    font-size: 48px;
    padding-right: 30px;
}

.open_courseimg {
    position: relative;
    margin-bottom: 30px;
}

.open_courseimg:before {
    content: "";
    width: 40px;
    height: 40px;
    background: url(images/astarisk.png) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.open_courseimg .col {
    width: 50%;
    height: 360px;
    position: relative;
}

.open_courseimg .col .bcenter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.open_courseimg .col .bcenter h3 {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 36px;
    color: #fff;
    text-shadow: 0 0 5px black;
}

.open_courseimg .col .bcenter h3.oilmid {
    font-size: 24px;
}

.price {
    width: 61%;
    margin: 0 auto;
    border: 1px solid #fff;
}

.priceinner {
}

.price h3 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.price1 {
    width: 40%;
}

.price1 p,
.price2 p {
    text-align: center;
    letter-spacing: 3px;
}

.price2 {
    width: 20%;
}

.price2 p {
    padding-bottom: 60px;
    background: url(images/arrow.png) no-repeat center bottom;
    -webkit-background-size: 35px;
    background-size: 35px;
    font-size: 20px;
    letter-spacing: 3px;
}

.price1.pbefore p {
    text-align: right;
}

.price1.pafter p {
    font-size: 48px;
    border: 1px solid #fff;
    background:rgba(255,255,255,0.5);
    color: #14455c;
    margin-right: 30px;
}

.menu {
    padding: 40px 0 100px;
}

.menu ul li {
    width: 61%;
    position: relative;
    margin: 60px auto 0px;
    height: 400px;
}

.menu ul li:first-child {
    margin: 0 auto;
}

.menu .menutitle {
    padding-top: 10px;
    margin-bottom: 20px;
}

.menu ul li h2 {
    position: relative;
    font-size: 36px;
    z-index: 2;
    padding: 15px 0 15px 20px;
    width: 50%;
    text-align: center;
    color: #fff;
}

.menu ul li:nth-child(2) h2,
.menu ul li:nth-child(3) h2 {
    font-size: 28px;
}

.menu ul li span {
    position: relative;
    width: 50%;
    margin-right: -30px;
    z-index: 2;
    color: #fff;
    text-align: right;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 4px;
}

.menu li .imgbox {
    position: absolute;
    top: 0;
    right: 0;
    height: 400px;
    z-index: 1;
}

.menu li .menu_comment {
    position: absolute;
    z-index: 2;
    font-size: 20px;
    left: -30px;
    width: 90%;
}

.menu li .menu_comment p {
    font-weight: bold;
    margin-bottom: 10px;
}

.voice {
    padding-top: 0px;
    padding-bottom: 40px;
}

.voice h2 {
    width: 61%;
    padding: 20px 0 0;
    margin: 0 auto 50px;
    font-size: 48px;
    letter-spacing: 3px;
    position: relative;
    border-bottom: 1px solid #fff;
}

.voice h2:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 50px 0 50px;
    border-color: #15465E transparent transparent transparent;
    z-index: 4;
    bottom: -19px;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.voice h2:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 50px 0 50px;
    border-color: #ffffff transparent transparent transparent;
    z-index: 3;
    bottom: -20px;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.voice .imgbox {
    width: 61%;
    margin: 0 auto;
}

.voice_comment {
    width: 61%;
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
}

.voice_comment h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #ebf5fb;
    text-align: center;
}

.voice_comment p {
    font-size: 16px;
    margin-bottom: 5px;
    text-align: left;
    color: #ebf5fb;
}

.voice_comment p + span {
    display: block;
    text-align: right;
    font-size: 16px;
}

.voice_comment + span {
    font-size: 14px;
    text-align: right;
    display: block;
    width: 61%;
    margin: 0 auto;
}


/*======================================================================
  footer
======================================================================*/

.footbox {
    background: url(images/gray_bg3.jpg) repeat-y;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 40px 0;
}

.goaisatsu {
    width: 61%;
    border: 1px solid #ffffff;
    margin: 0 auto;
    padding: 30px 25px 20px;
    box-sizing: border-box;
    background: url(images/goaisatsu_2.png) no-repeat left top;
    -webkit-background-size: 160px;
    background-size: 160px;
}

.goaisatsu h2 {
    font-weight: bold;
    letter-spacing: 4px;
    color: #fff;
}

.goaisatsu p {
    font-size: 16px;
    margin-top: 15px;
}

.goaisatsu span {
    font-size: 16px;
    font-weight: bold;
}

.campaign_date {
    margin: 30px 0 0;
}

.campaign_date li {
    width: 48.5%;
    background: rgb(145, 58, 43, 0.7);
    padding: 15px;
    box-sizing: border-box;
}

.campaign_date li h2 {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.campaign_date li > span {
    display: block;
    font-size: 16px;
    text-align: center;
}

.campaign_date div {
    padding: 10px;
    border: 1px solid #fff;
}

.campaign_date li p {
    font-size: 14px;
    text-align: center;
    color: #ffffff;
}

.campaign_date li p span {
    background: rgba(255,255,255,0.7);
    padding: 5px 10px;
    border-radius: 5px;
    color: #913A2B;
}

.open-nokori {
    display: block;
    margin-bottom: 40px;
}

.ready {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
}

.contact {
    margin-bottom: 80px;
}

.contact p {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
}

.contact div {
    text-align: center;
}

.contact div a {
    padding: 0px 20px 14px;
    border: 1px solid #ffffff;
    font-size: 42px;
    letter-spacing: 10px;
    display: inline-block;
    line-height: 1;
    border-radius: 10px;
    color: #fff;
    background: #14455c;
    box-shadow: 0 6px 0 0 #c6c6c6;
    
}

.contact div a span {
    font-size: 16px;
    color: #fff;
    letter-spacing: 3px;
}

.syozaiti .gmap {
    width: 61%;
    height: 360px;
}

.syozaiti .gmap iframe {
    width: 100%;
}

.syozaiti h2 {
    width: 60%;
    margin: 0 auto 30px;
}

.syozaiti .shop_detail {
    width: 36%;
}

.syozaiti address {
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 20px;
    font-style: normal;
    letter-spacing: 3px;
}

.syozaiti address span {
    display: block;
}

.syozaiti p {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    background: #913a2b;
    padding: 5px 15px;
    border-radius: 5px;
    margin-right: 5px;
}

.copyright {
    margin-top: 20px;
    background: rgba(21,58,92,0.6);
    padding: 5px 0;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 14px;
    letter-spacing: 3px;
}

footer {
    padding-bottom: 120px;
}


/* デバイスサイズ 〜1024px　-smallpc- */

@media print, screen and (max-width: 1024px) {
    
    .pcnone {
        display: block;
    }
    
    .MV {
        height: 100vh;
    }
    
    .mvimg.imgbox img {
        height: 100vh;
        width: auto;
    }
    
    .headbox {
        padding: 30px 0 0;
    }
    
    .headbox .open {
        line-height: 1.4;
    }
    
    .MV h1 {
        width: 22%;
    }
    
    .w980 {
        width: 100%;
    }
    
    .campaign .w980 {
        padding: 0 3%;
        box-sizing: border-box;
    }
    
    .menu .menutitle {
        margin-bottom: 30px;
    }
    
    .menu ul li h2 {
        width: 61%;
    }
    
    .campaign h2 {
        font-size: 30px;
    }
    
    .menu ul li span {
        font-size: 30px;
    }
    
    .menu ul li:nth-child(2) h2, .menu ul li:nth-child(3) h2 {
        font-size: 21px;
    }
    
    .campaign .open_courseimg img {
        width: auto;
        height: 100%;
    }
    
    .menu ul li h2 {
        font-size: 30px;
    }
    
    .menu li .menu_comment {
        font-size: 16px;
    }
    
    .menu ul li .menutitle h2 {
        font-size: 28px;
    }
    
    .voice h2 {
        font-size: 30px;
    }
    
    footer {
        padding-bottom: 80px;
    }
    
    .footbox {
        padding: 3%;
    }
    
    .goaisatsu {
        width: 100%;
    }
    
    .campaign_date li h2 {
        font-size: 24px;
    }
    
    .campaign_date li > span {
        font-size: 24px;
    }
    
    .campaign_date li p {
        font-size: 24px;
        margin-bottom: 5px;
    }
    
    .campaign_date li p span {
        font-weight: bold;
        font-size: 24px;
        padding: 10px 20px;
    }
    
    .campaign_date {
        margin:  30px 0 40px;
    }
    
    .syozaiti .gmap {
        width: 55%;
    }
    
    .syozaiti .gmap iframe {
        vertical-align: bottom;
    }
    
    .syozaiti .shop_detail {
        width: 41%;
    }
    
}


/* デバイスサイズ 〜520px　-smartphone- */

@media print, screen and (max-width: 520px) {
    
    .smaonly {
        display: block;
    }
	
	body {
		font-size: 14px;
	}
    
    .MV .mvimg picture {
        width: auto;
    }
    
    .grandopen {
        width: 100%;
        padding: 20px 0 0;
        box-sizing: border-box;
        border: none;
        margin: 0 auto 50px;
    }
    
    .headbox .open {
        font-size: 42px;
        padding: 15px 0;
        color: #ebf5fb;
        width: 80%;
        margin: 0 auto 10px;
        border: 2px solid #fff;
    }
    
    .grandopen span {
        font-size: 18px;
        line-height: 1.4;
    }
    
    .grandopen span strong {
        font-size: 14px;
    }
    
    .mvcatch {
        font-size: 21px;
        color: #ebf5fb;
    }
    
    .MV h1 {
        width: 45%;
    }
    
    .campaign h2 {
        font-size: 24px;
        margin-bottom: 40px;
    }
    
    .campaign_menu > p {
        font-size: 16px;
        top: -24px;
    }
    
    .campaign_menu > p span {
        font-size: 24px;
        padding-right: 10px;
    }
    
    .open_courseimg .col {
        height: 210px;
    }
    
    .open_courseimg .col .bcenter h3 {
        font-size: 18px;
    }
    
    .open_courseimg .col .bcenter h3.oilmid {
        font-size: 16px;
    }
    
    .open_courseimg:before {
        width: 25px;
        height: 25px;
    }
    
    .price {
        margin: 0 auto 3%;
        width: 100%;
    }
    
    .menu {
        padding: 10% 0 80px;
    }
    
    .menu ul li {
        width: 80%;
        height: 320px;
    }
    
    .menu ul li h2 {
        font-size: 21px;
        width: 100%;
        padding: 15px 0 15px 5px;
    }
    
    .menu ul li span {
        font-size: 21px;
    }
    
    .menu li .menu_comment {
        font-size: 14px;
        width: 100%;
    }
    
    .menu li .imgbox {
        height: 320px;
    }
    
    .menu li .menu_comment p {
        font-size: 14px;
    }
    
    .voice h2 {
        padding: 0;
    }
    
    .voice .imgbox {
        width: 80%;
    }
    
    .voice_comment {
        width: 100%;
        padding: 10px 3%;
    }
    
    .voice_comment + span {
        font-size: 10px;
        width: 100%;
    }
    
    .voice .imgbox {
        width: 94%;
    }
    
    .footbox {
        background: url(images/gray_bg3.jpg) repeat-y;
        -webkit-background-size: contain;
        background-size: contain;
        padding: 40px 3%;
    }
    
    .goaisatsu {
        padding: 20px 3% 15px;
        -webkit-background-size: 180px;
        background-size: 180px;
    }
    
    .goaisatsu h2 {
        font-size: 21px;
        text-align: right;
        padding: 30px 0;
    }
    
    .goaisatsu p {
        font-size: 14px;
        margin-top: 10px;
    }
    
    .goaisatsu span {
        font-size: 14px;
        margin-top: 15px;
        display: block;
        text-align: right;
    }
    
    .campaign_date {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        margin: 30px 0 20px;
    }
    
    .campaign_date li {
        width: 100%;
    }
    
    .campaign_date li {
        margin-bottom: 3%;
    }
    
    .open-nokori {
        margin: -30px 0 40px;
    }
    
    .ready {
        font-size: 21px;
    }
    
    .contact {
        margin-bottom: 60px;
    }
    
    .contact p {
        font-size: 21px;
        margin-bottom: 5px;
    }
    
    .contact div a span {
        font-size: 14px;
        display: block;
        line-height: 1.4;
        margin-bottom: 5px;
        padding: 10px 0;
        letter-spacing: 1px;
        font-weight: normal;
    }
    
    .contact div a {
        font-size: 28px;
        letter-spacing: 4px;
        font-weight: bold;
    }
    
    .syozaiti {
        -webkit-flex-direction: column-reverse;
        -moz-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        -o-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    
    .syozaiti .gmap,
    .syozaiti .shop_detail {
        width: 100%;
    }
    
    .syozaiti .shop_detail {
        margin-bottom: 15px;
    }
    
    .syozaiti h2 {
        width: 40%;
        margin: 0 auto 20px;
    }
    
    .syozaiti .gmap iframe {
        height: 300px;
    }
    
    .copyright {
        margin-top: 3px;
    }
    
    .copyright small {
        font-size: 14px;
    }

}