@charset "utf-8";

/**************************************************
All Page
**************************************************/

/*** css initialize ***/
html, body, div, h1, h2, h3, h4, h5, h6, p, span, header, footer, nav, aside,
small, abbr, address, code, del, img, ins, kbd, q, samp,
strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, dialog, figure,
menu, section, time, mark, object, audio, video {
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
word-break:break-all;
word-wrap:break-word;
}

body { 
font-family: "Yu Gothic", "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", sans-serif;
font-size:17px;
text-align:center;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
color:#353535;
background:#fff;
font-weight:bold;
overflow-x:hidden;
}

body.ban {
overflow:hidden;
}

html {
overflow-x:hidden;
}

.clear {
clear:both;
}

img {
border:none;
vertical-align:bottom;
}

ul,ol {
list-style:none;
}

a {
color:#353535;
outline:none;
text-decoration:none;
transition:0.3s;
}

a:hover,
a:active {
color:#a58c94;
}

a[href^="tel:"] {
pointer-events:none;
}

::placeholder {
color:#c3c3c3;
letter-spacing:0.1em;
}

:focus {
outline:0;
}

.pc {
display:block;
}

.sp {
display:none;
}

.marker {
background:linear-gradient(transparent 50%, #ffffa3 60%);
}

.font_H {
font-family:"Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif;
font-weight:500;
}

@font-face {
font-family:'handwritten';
src:url('/wp-content/themes/olang/fonts/SueEllenFrancisco-Regular.woff2') format('woff2'), url('/wp-content/themes/olang/fonts/SueEllenFrancisco-Regular.woff') format('woff'), url('/wp-content/themes/olang/fonts/SueEllenFrancisco-Regular.otf') format('opentype');
}

.handwritten {
font-family: "handwritten", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic", "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "メイリオ", sans-serif;
font-weight:400;
}

@font-face {
font-family:'Font Awesome 5 Free';
font-style:normal;
font-weight:400;
src: url("/wp-content/themes/olang/fonts/fa-regular-400.woff2") format("woff2"),
url("/wp-content/themes/olang/fonts/fa-regular-400.ttf") format("truetype");
font-display:swap;
}

@font-face {
font-family:'Font Awesome 5 Free';
font-style:normal;
font-weight:900;
src: url("/wp-content/themes/olang/fonts/fa-solid-900.woff2") format("woff2"),
url("/wp-content/themes/olang/fonts/fa-solid-900.ttf") format("truetype");
font-display:swap;
}

@font-face {
font-family:'Font Awesome 5 Free';
font-style:normal;
font-weight:400;
src: url("/wp-content/themes/olang/fonts/fa-brands-400.woff2") format("woff2"),
url("/wp-content/themes/olang/fonts/fa-brands-400.ttf") format("truetype");
font-display:swap;
}

.display {
opacity:0;
transform:translate(0, 100px);
transition:opacity .8s, transform .8s;
}
 
.display.active {
opacity:1;
transform:translate(0, 0);
}


/* wrapper --------------- */

#wrapper {
width:100%;
float:left;
overflow:hidden-x;
}

.wrap {
width:1140px;
margin:0 auto;
}

#contents {
width:100%;
padding-top:100px;
background:#fff;
float:left;
}

#main {
width:100%;
float:left;
}

#main h1.title {
width:100%;
line-height:1.4;
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px solid #e0e0e0;
text-align:center;
font-size:26px;
float:left;
letter-spacing:0.1em;
}

#main .sub_title {
width:100%;
line-height:1;
margin-bottom:100px;
text-align:center;
font-size:20px;
color:#d8878b;
float:left;
letter-spacing:0.1em;
}

/* -------------------------------------------------------------- */


/* header --------------- */

header.header {
width:100%;
height:97px;
background:#fff;
float:left;
position:relative;
z-index:1000;
}

header .block {
width:100%;
padding-left:10px;
float:left;
box-sizing:border-box;
}

header .logo {
padding:20px 0;
text-align:left;
float:left;
}

/* -------------------------------------------------------------- */


/* header nav scroll --------------- */

header .fix.fixation-scroll {
width:100%;
background:#fff;
position:fixed;
top:0;
left:0;
z-index:1001;
box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
}

header .fix.fixation-scroll .logo {
padding:10px 0;
}

header .fix.fixation-scroll nav#nav li.header_contact a {
height:77px;
padding:7px 5px 0;
}

/* -------------------------------------------------------------- */


/* header nav --------------- */

header nav#nav {
text-align:right;
display:table;
float:right;
}

header nav#nav ul li {
padding-right:10px;
display:table-cell;
vertical-align:middle;
}

header nav#nav li:last-child {
padding-right:0;
}

header nav#nav li a {
position:relative;
letter-spacing:0.05em;
}

header nav#nav li:after {
padding-left:10px;
font-size:16px;
font-weight:500;
color:#d8878b;
content:'／';
vertical-align:-0.05em;
}

header nav#nav li:nth-of-type(4) {
padding-right:20px;
}

header nav#nav li:nth-of-type(4):after,
header nav#nav li:nth-of-type(5):after {
display:none;
}

header nav#nav ul li.header_contact {
padding-right:0;
}

header nav#nav li.header_contact a {
width:300px;
height:97px;
padding:17px 5px 0;
background:#dc1010;
text-align:center;
color:#fff;
display:inline-block;
box-sizing:border-box;
}

header nav#nav li.header_contact a span {
width:100%;
display:inline-block;
}

header nav#nav li.header_contact a span:nth-of-type(1) {
margin-bottom:5px;
font-size:14px;
}

header nav#nav li.header_contact a span:nth-of-type(2) {
font-size:20px;
letter-spacing:0.1em;
}

header nav#nav li.header_contact a span:nth-of-type(2):before {
padding-right:7px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f0e0';
}

header nav#nav li.header_contact a:hover {
background:#c30404;
}

header nav#nav li.header_contact a:after {
display:none;
}

/* -------------------------------------------------------------- */


/* main_visual --------------- */

#main_visual {
width:100%;
padding-left:10%;
background:#fff;
float:left;
position:relative;
box-sizing:border-box;
}

#main_visual img {
width:100%;
height:auto;
}

#main_visual h2 {
text-align:left;
font-size:38px;
font-weight:400;
color:#4c4c4c;
writing-mode:vertical-rl;
white-space:pre;
position:absolute;
top:80px;
left:20px;
letter-spacing:0em;
text-shadow:20px 60px 3px rgba(132, 132, 132, 0.1);
}

#main_visual h2 span {
width:100%;
line-height:1.8;
display:inline-block;
}

#main_visual h2 span:nth-of-type(2) {
margin-top:160px;
}

#main_visual .en {
line-height:1.7;
text-align:left;
font-size:54px;
position:absolute;
top:16%;
right:5%;
color:#fff;
text-shadow:2px 3px 3px rgba(0, 0, 0, 0.3);
letter-spacing:0.15em;
}

#main_visual .en span:nth-of-type(2) {
padding-top:10px;
display:inline-block;
}

#main_visual .en.font_H {
font-weight:700;
}

/* -------------------------------------------------------------- */


/* sub_visual --------------- */

#sub_visual {
width:100%;
background:#fff;
float:left;
position:relative;
}

#sub_visual img {
width:100%;
height:auto;
}

#sub_visual .en {
line-height:1.7;
text-align:left;
font-size:54px;
position:absolute;
top:16%;
right:5%;
color:#fff;
text-shadow:2px 3px 3px rgba(0, 0, 0, 0.3);
letter-spacing:0.15em;
}

#sub_visual .en span:nth-of-type(2) {
padding-top:10px;
display:inline-block;
}

#sub_visual .en.font_H {
font-weight:700;
}

#sub_visual .box_title {
width:380px;
height:380px;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:absolute;
left:10%;
top:50%;
transform:translate(0%, -50%);
z-index:2;
border-radius:50%;
box-sizing:border-box;
box-shadow:0 10px 10px 0px rgba(0,0,0,0.1);
outline:1px dashed #d8878b;
outline-offset:-16px;
}

#sub_visual .box_title h2 {
width:100%;
margin-bottom:10px;
font-size:22px;
float:left;
letter-spacing:0.1em;
}

#sub_visual .box_title h2.single_title {
padding:0 10%;
font-size:15px;
box-sizing:border-box;
}

#sub_visual .box_title h2.artist_title {
padding:0 10%;
font-size:19px;
box-sizing:border-box;
}

#sub_visual .box_title .en_title {
width:100%;
font-size:19px;
color:#d8878b;
float:left;
letter-spacing:0.1em;
}

/* -------------------------------------------------------------- */


/* #content_4 --------------- */

#content_4 {
width:100%;
padding:100px 0;
background:#fdf9f9;
float:left;
}

#content_4 .title {
width:100%;
margin-bottom:80px;
display:table;
float:left;
}

#content_4 .title h2 {
width:250px;
line-height:1.3;
padding:14px 0;
border-top:1px solid #cd444a;
border-right:1px solid #cd444a;
font-size:24px;
display:table-cell;
vertical-align:middle;
letter-spacing:0.1em;
}

#content_4 .title h2 span {
font-size:18px;
color:#d8878b;
}

#content_4 .title .text {
padding:14px 0 14px 20px;
border-bottom:1px solid #cd444a;
text-align:left;
font-size:15px;
display:table-cell;
vertical-align:middle;
box-sizing:border-box;
}

.content_4_wrap {
width:1140px;
margin:0 auto;
}

.content_4_wrap.display {
opacity:1;
transform:none;
transition:all;
}
 
.content_4_wrap.display.active {
opacity:1;
transform:none;
}

#content_4 .block {
width:100%;
float:left;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

#content_4 .block:after {
width:23%;
content:'';
display:block;
}

#content_4 .block a {
width:23%;
margin-bottom:35px;
padding:40px 10px 40px 100px;
background:#fff;
border:3px dotted #cfcfcf;
float:left;
box-sizing:border-box;
position:relative;
}

#content_4 .block a:hover {
border:3px dotted #cf3f3f;
}

#content_4 .block a h3 {
width:100%;
line-height:1.2;
text-align:left;
float:left;
}

#content_4 .block a h3 span {
width:100%;
margin-top:5px;
font-size:15px;
color:#d8878b;
float:left;
letter-spacing:0.1em;
}

#content_4 .block a img {
position:absolute;
bottom:-20px;
left:-25px;
}

#content_4 .but {
width:100%;
margin-top:35px;
float:left;
}

#content_4 .but a {
width:310px;
padding:12px 0;
background:#d8474e;
color:#fff;
display:inline-block;
position:relative;
border-radius:45px;
}

#content_4 .but a:after {
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f054';
position:absolute;
top:50%;
right:20px;
transform:translate(0%, -50%);
transition:0.3s;
}

#content_4 .but a:hover {
background:#c3262e;
}

#content_4 .but a:hover:after {
right:15px;
}

/* -------------------------------------------------------------- */


/* contents_6 --------------- */

#content_6 {
width:100%;
padding:100px 0;
float:left;
position:relative;
}

#content_6:before {
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url('/wp-content/themes/olang/images/footer_visual.webp');
background-size:cover;
content:'';
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
}

#content_6 .block {
width:100%;
background-color:rgba(0,0,0,0.6);
padding:80px 0;
text-align:center;
color:#fff;
float:left;
}

#content_6 .block .box {
width:100%;
margin-bottom:60px;
float:left;
}

#content_6 .block .top {
width:100%;
line-height:1.4;
margin-bottom:10px;
font-size:50px;
float:left;
}

#content_6 .block .bottom {
width:100%;
font-size:30px;
float:left;
}

#content_6 .but {
width:100%;
text-align:center;
font-size:20px;
float:left;
}

#content_6 .but .but_in {
width:360px;
margin:0 40px;
display:inline-block;
}

#content_6 .but .but_in span {
width:100%;
margin-bottom:5px;
font-size:17px;
float:left;
}

#content_6 .but a {
width:100%;
padding:10px 0;
background:#d8474e;
color:#fff;
float:left;
position:relative;
border-radius:45px;
}

#content_6 .but a:after {
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f054';
position:absolute;
top:50%;
right:20px;
transform:translate(0%, -50%);
transition:0.3s;
}

#content_6 .but .but_in:nth-of-type(1) a:after {
display:none;
}

#content_6 .but a:hover {
background:#c3262e;
}

#content_6 .but a:hover:after {
right:15px;
}

#content_6 .but .but_in:nth-of-type(2) a:before {
padding-right:10px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f0e0';
}

#content_6 .but .but_in:nth-of-type(1) a:before {
font-size:17px;
padding-right:10px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f3cd';
}

/* -------------------------------------------------------------- */


/* sns --------------- */

#sns_but {
width:100%;
margin-bottom:100px;
text-align:center;
font-size:26px;
float:left;
}

#sns_but div {
margin:0 10px;
display:inline-block;
}

#sns_but a {
width:50px;
height:50px;
line-height:50px;
text-align:center;
color:#fff;
float:left;
box-sizing:border-box;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
}

#sns_but a span {
display:none;
}

#sns_but #facebook a {
background:#3b5998;
}

#sns_but #twitter a {
background:#0f1419;
}

#sns_but #line a {
background:#00B900;
}

#sns_but #facebook a:hover,
#sns_but #twitter a:hover,
#sns_but #line a:hover {
background:#585858;
}

#sns_but #facebook a:before,
#sns_but #twitter a:before,
#sns_but #line a:before {
font-family:'Font Awesome 5 Free';
font-weight:400;
}

#sns_but #facebook a:before {
content:'\f39e';
}

#sns_but #twitter a:before {
content:'\e61b';
}

#sns_but #line a:before {
content:'\f3c0';
}

/* -------------------------------------------------------------- */


/*  error --------------- */

#wrap_error {
width:100%;
margin-bottom:100px;
text-align:center;
float:left;
}

#wrap_error .error_404 {
margin-bottom:40px;
font-weight:bold;
font-size:30px;
}

#wrap_error .error_link a {
width:310px;
padding:12px 0;
background:#d8474e;
color:#fff;
display:inline-block;
position:relative;
border-radius:45px;
}

#wrap_error .error_link a:hover {
background:#c3262e;
}

/* -------------------------------------------------------------- */


/* footer --------------- */

footer#footer {
width:100%;
padding-top:60px;
background:#333333;
text-align:left;
float:left;
clear:both;
}

footer#footer a {
color:#fff;
}

footer#footer a:hover {
color:#a58c94;
}

footer#footer .wrap {
width:1200px;
}

nav#footer_nav {
width:68%;
font-size:15px;
float:left;
box-sizing:border-box;
}

nav#footer_nav ul {
width:30%;
float:left;
}

nav#footer_nav ul:nth-of-type(1) {
width:40%;
}

nav#footer_nav ul li {
width:100%;
margin-bottom:15px;
float:left;
box-sizing:border-box;
}

nav#footer_nav ul li:last-child {
margin-bottom:0;
}

nav#footer_nav ul li a {
width:100%;
float:left;
}

nav#footer_nav ul li a:before {
padding-right:7px;
font-size:8px;
font-family:'Font Awesome 5 Free';
font-weight:900;
/*content:'\f35a';*/
content:'●';
vertical-align:0.2em;
}

nav#footer_nav ul li.child {
padding-left:15px;
font-size:14px;
}

nav#footer_nav ul li.child a:before {
font-weight:900;
content:'\f061';
}

footer#footer .wrap #footer_address {
width:32%;
padding-left:50px;
border-left:1px solid #959595;
color:#fff;
float:left;
box-sizing:border-box;
}

footer#footer .wrap #footer_address .name {
width:100%;
margin-bottom:8px;
font-size:18px;
float:left;
letter-spacing:0.1em;
}

footer#footer .wrap #footer_address .address {
width:100%;
margin-bottom:5px;
padding-bottom:5px;
border-bottom:1px solid #959595;
font-size:15px;
float:left;
}

footer#footer .wrap #footer_address .phone {
margin-right:20px;
margin-bottom:12px;
font-size:14px;
float:left;
}

footer#footer .wrap #footer_address .phone:before {
padding-right:8px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f2a0';
}

footer#footer .wrap #footer_address .mail {
margin-bottom:12px;
font-size:14px;
float:left;
}

footer#footer .wrap #footer_address .mail:before {
padding-right:5px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f0e0';
}

footer#footer .wrap #footer_address .mail .at:after {
content:'@';
}

footer#footer .wrap #footer_address .mail .com:after {
content:'.com';
}

footer#footer .wrap #footer_address .time {
margin-bottom:5px;
margin-right:20px;
font-size:14px;
float:left;
}

footer#footer .wrap #footer_address .time:before {
padding-right:8px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f017';
}

footer#footer .wrap #footer_address .holiday {
margin-bottom:5px;
font-size:14px;
float:left;
}

footer#footer .wrap #footer_address .holiday:before {
padding-right:8px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f073';
}

footer#footer .wrap #footer_address .link {
width:100%;
font-size:14px;
float:left;
}

footer#footer .wrap #footer_address .link a:before {
padding-right:8px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f0e8';
}

footer#footer .wrap #footer_address .sns {
width:100%;
margin-top:10px;
float:left;
}

footer#footer .wrap #footer_address .sns a:before {
margin-right:15px;
font-size:28px;
font-family:'Font Awesome 5 Free';
font-weight:400;
}

footer#footer .wrap #footer_address .sns a.facebook:before {
content:'\f09a';
}

footer#footer .wrap #footer_address .sns a.twitter:before {
content:'\e61b';
}

footer#footer .wrap #footer_address .sns a.instagram:before {
content:'\f16d';
}

#copyright {
width:100%;
margin-top:60px;
padding:20px 0;
background:#d8878b;
border-top:2px solid #fff;
text-align:center;
font-size:14px;
color:#fff;
float:left;
}

#copyright .text {
width:100%;
margin-bottom:10px;
float:left;
}

/* -------------------------------------------------------------- */


/* top scroll --------------- */

#top_scroll {
font-size:11px;
position:fixed;
bottom:100px;
right:15px;
z-index:10;
display:none;
letter-spacing:0.1em;
writing-mode:vertical-rl; 
}

#top_scroll a {
color:#000;
position:relative;
}

#top_scroll a:hover {
color:#8c98a5;
}

#top_scroll a:before {
width:1px;
height:45px;
content:'';
float:left;
background:#000;
position:absolute;
top:-53px;
left:8px;
}

#top_scroll a:after {
width:1px;
height:14px;
content:'';
display:block;
background:#000;
position:absolute;
top:-53px;
left:4px;
transform:rotate(30deg);
}

/* -------------------------------------------------------------- */


/* bread_crumbs --------------- */

#breadcrumbs {
width:100%;
padding-bottom:100px;
text-align:left;
float:left;
}

#breadcrumbs p {
float:left;
}

#breadcrumbs p a {
float:left;
}

#breadcrumbs p.bread_home a:before {
padding-right:7px;
color:#d8878b;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f015';
}

#breadcrumbs p.bread_sub a:before,
#breadcrumbs p.bread_error:before {
margin:0 10px;
color:#d8878b;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f054';
}

#breadcrumbs p.bread-sub span.bread-error:before {
margin:0 10px;
color:#d8878b;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f054';
}

/* -------------------------------------------------------------- */


/* pagenavi --------------- */

#pagenavi {
width:100%;
margin-bottom:100px;
text-align:center;
float:left;
}

#pagenavi span.current {
background:#d8878b;
color:#fff;
}

#pagenavi span.dots,
#pagenavi span.dots:hover {
border:0;
background:none;
color:#353535;
}

#pagenavi .page-numbers {
width:36px;
height:36px;
line-height:36px;
margin:0 2px 8px;
background:#bbbbbb;
color:#fff;
display:inline-block;
}

#pagenavi a:hover {
background:#d8878b;
color:#fff;
}

#pagenavi a.next,
#pagenavi a.prev {
background:none;
border:0;
}

#pagenavi a.next:before {
color:#78828e;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f054';
}

#pagenavi a.prev:before {
color:#78828e;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f053';
}

/* -------------------------------------------------------------- */


/**************************************************
***************************************************
width:[1700px] or less.
***************************************************
**************************************************/

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

#main_visual h2 {
left:10px;
font-size:2.5vw;
}

}


/**************************************************
***************************************************
width:[1140px] or less.
***************************************************
**************************************************/

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

.pc {
display:none;
}

.sp {
display:block;
}

/* wrapper --------------- */

.wrap {
width:100%;
padding:0 10px;
float:left;
box-sizing:border-box;
}

#contents {
padding-top:60px;
}

#main .sub_title {
margin-bottom:60px;
}


/* header --------------- */

header.header {
height:auto;
padding:10px 0;
}

header .block {
display:block;
}

header .logo {
width:100%;
padding:0;
display:block;
}


/* header nav --------------- */

header nav#nav {
width:100%;
height:100%;
margin-top:0;
padding:0;
background-color:rgba(255,255,255,1);
display:none;
position:fixed;
top:0;
left:0;
z-index:1000;
text-align:left;
box-sizing:border-box;
overflow-y:auto;
}

header nav#nav ul {
width:100%;
padding:80px 10px 20px;
float:left;
box-sizing:border-box;
}

header nav#nav ul li {
width:100%;
padding-right:0;
display:block;
float:left;
}

header nav#nav li a {
width:100%;
padding:15px 0;
border-bottom:2px dotted #d1d1d1;
float:left;
}

header nav#nav li:after {
display:none;
}

header nav#nav li:nth-of-type(4) {
padding-right:0;
}

header nav#nav li.header_contact {
text-align:center;
}

header nav#nav li.header_contact a {
width:100%;
max-width:500px;
margin-top:40px;
padding:15px 10px;
border-bottom:0;
display:inline-block;
box-sizing:border-box;
float:none;
}


/* header global --------------- */

#global,
#global span {
display:inline-block;
box-sizing:border-box;
transition:0.3s;
-webkit-transition:0.3s;
-moz-transition:0.3s;
}

#global {
width:36px;
height:22px;
position:fixed;
top:0;
right:10px;
cursor:pointer;
z-index:1010;
}

#global > div {
width:36px;
height:22px;
position:relative;
}

#global span {
position:absolute;
left:0;
width:100%;
height:2px;
background-color:#000;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

#global span:nth-of-type(1) {
top: 0;
}

#global span:nth-of-type(2) {
top:10px;
}

#global span:nth-of-type(3) {
bottom:0;
}

#global.active span {
background-color:#000!important;
}

#global.active span:nth-of-type(1) {
transform:translateY(10px) rotate(-45deg);
-webkit-transform:translateY(10px) rotate(-45deg);
-moz-transform:translateY(10px) rotate(-45deg);
}

#global.active span:nth-of-type(2) {
left:0;
opacity:0;
animation:menu-anima 0.4s forwards;
-webkit-animation:menu-anima 0.4s forwards;
-moz-animation:menu-anima 0.4s forwards;
transform:rotate(180deg);
}

@keyframes menu-anima {
  100% {
    height:0;
  }
}

@-webkit-keyframes menu-anima {
  100% {
    height:0;
  }
}

@-moz-keyframes menu-anima {
  100% {
    height:0;
  }
}

#global.active span:nth-of-type(3) {
transform:translateY(-10px) rotate(45deg);
-webkit-transform:translateY(-10px) rotate(45deg);
-moz-transform:translateY(-10px) rotate(45deg);
}


/* main_visual --------------- */

#main_visual {
padding-left:20%;
}

#main_visual img {
width:auto;
max-width:1140px;
object-fit:cover;
object-position:50% 50%;
}

#main_visual .en {
font-size:4.5vw;
top:8%;
right:2%;
letter-spacing:0.1em;
}

#main_visual h2 {
font-size:4.5vw;
top:20%;
left:10px;
text-shadow:6px 15px 2px rgba(0, 0, 0, 0.1);
z-index:5;
}

#main_visual h2 span:nth-of-type(2) {
margin-top:25%;
}


/* sub_visual --------------- */

#sub_visual img {
width:auto;
max-width:1300px;
object-fit:cover;
object-position:50% 50%;
}

#sub_visual .en {
font-size:5.5vw;
top:10%;
right:2%;
letter-spacing:0.15em;
}

#sub_visual .box_title {
width:70vw;
height:70vw;
max-width:380px;
max-height:380px;
left:20px;
top:auto;
bottom:30px;
transform:none;
}


/* #content_4 --------------- */

.content_4_wrap {
width:100%;
}

.content_4_wrap.display {
opacity:0;
transform:translate(0, 100px);
transition:all 1s;
}
 
.content_4_wrap.display.active {
opacity:1;
transform:translate(0, 0);
}

#content_4 .block {
display:none;
}

#content_4 .block a {
width:310px;
margin-bottom:35px;
margin-right:30px;
}

#content_4 .block:after {
display:none;
}

#content_4 .block .prev,
#content_4 .block .next {
position:absolute;
top:-50px;
}

#content_4 .block .prev {
right:50px;
}

#content_4 .block .next {
right:5px;
}

#content_4 .block .prev:before,
#content_4 .block .next:before {
font-size:34px;
color:#d8878b;
font-family:'Font Awesome 5 Free';
font-weight:900;
}

#content_4 .block .prev:before {
content:'\f137';
}

#content_4 .block .next:before {
content:'\f138';
}


/* footer --------------- */

footer#footer {
padding-top:0;
}

footer#footer .wrap {
width:100%;
padding:0;
}

nav#footer_nav {
width:100%;
}

nav#footer_nav ul {
width:100%;
}

nav#footer_nav ul:nth-of-type(1) {
width:100%;
}

nav#footer_nav ul li {
margin-bottom:0;
}

nav#footer_nav ul li a {
padding:12px 10px;
box-sizing:border-box;
}

nav#footer_nav ul:nth-of-type(1) li:nth-child(even) a,
nav#footer_nav ul:nth-of-type(2) li:nth-child(even) a,
nav#footer_nav ul:nth-of-type(3) li:nth-child(odd) a {
background:#434343;
}

footer#footer .wrap #footer_address {
width:100%;
margin-top:30px;
padding:0 10px;
border-left:0;
box-sizing:border-box;
}

#copyright {
margin-top:30px;
padding:10px 0;
}


/* top scroll --------------- */

#top_scroll {
bottom:120px;
right:10px;
}


/* bread_crumbs --------------- */

#breadcrumbs {
padding-bottom:40px;
}

#breadcrumbs p {
line-height:1.5;
margin-bottom:10px;
}


}


/**************************************************
***************************************************
width:[768px] or less.
***************************************************
**************************************************/

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


/* main_visual --------------- */

#main_visual img {
max-width:800px;
}

#main_visual .en {
font-size:4.5vw;
}


/* #content_4 --------------- */

#content_4 {
padding:60px 0;
}

#content_4 .title {
display:block;
}

#content_4 .title h2 {
width:100%;
margin-bottom:30px;
padding:0 0 10px;
border-top:0;
border-right:0;
border-bottom:1px solid #cd444a;
display:block;
}

#content_4 .title .text {
padding:0;
border-bottom:0;
display:block;
}


/* contents_6 --------------- */

#content_6 {
padding:60px 0;
}

#content_6 .block {
padding:60px 10px;
box-sizing:border-box;
}

#content_6 .block .box {
margin-bottom:40px;
}

#content_6 .block .top {
font-size:7.5vw;
}

#content_6 .block .bottom {
font-size:5vw;
}

#content_6 .but .but_in:nth-of-type(1) {
margin-bottom:20px;
}


/* footer --------------- */

footer#footer .wrap #footer_address .address {
font-size:4vw;
}

footer#footer .wrap #footer_address .name {
font-size:6vw;
}

footer#footer .wrap #footer_address .phone,
footer#footer .wrap #footer_address .mail,
footer#footer .wrap #footer_address .time,
footer#footer .wrap #footer_address .holiday {
width:48%;
margin-right:0;
font-size:3.5vw;
}

}


/**************************************************
***************************************************
width:[640px] or less.
***************************************************
**************************************************/

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

/* main_visual --------------- */
#main_visual .en {
font-size:5.5vw;
}


/* contents_6 --------------- */

#content_6 .but .but_in {
margin:0 20px;
}


/* sns --------------- */

#sns_but {
margin-bottom:60px;
}


/* pagenavi --------------- */

#pagenavi {
margin-bottom:60px;
}


}


/**************************************************
***************************************************
width:[480px] or less.
***************************************************
**************************************************/

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

/* wrapper --------------- */

#main h1.title {
font-size:5.5vw;
}

#main .sub_title {
font-size:5vw;
}


/* main_visual --------------- */

#main_visual img {
max-width:600px;
}


/* sub_visual --------------- */

#sub_visual .box_title {
width:70vw;
height:70vw;
left:50%;
transform:translate(-50%, 0%);
}

#sub_visual .box_title h2 {
font-size:17px;
}

#sub_visual .box_title .en_title {
font-size:16px;
}


/* contents_6 --------------- */

#content_6 .but {
padding:0 20px;
font-size:17px;
box-sizing:border-box;
}

#content_6 .but .but_in {
width:100%;
margin:0;
}


/*  error --------------- */

#wrap_error {
margin-bottom:60px;
}

#wrap_error .error_404 {
font-size:20px;
}


/* footer --------------- */

#copyright {
font-size:3vw;
}

}