@charset "UTF-8";

/* =================================================================
reset
=================================================================*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}

.clear {
    float: none;
	font-size: 0;
	line-height: 0;
	clear: both;
}
.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden}
.clearfix{min-height:1px;zoom:1}

input[type=text],
input[type=tel] ,
input[type=email],
textarea{
    -webkit-appearance: none;
    border-radius: 0;
}

.wf-loading { visibility: hidden;}
.wf-active { visibility: visible;}

a.disabled{
    pointer-events: none;
}

/*
===== custom ==========================================
*/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

img[src$=".svg"] {
	width: 100%;
	height: auto;
}

/* =================================================================
EFFECT
=================================================================*/
#Topimage .container .catchbox,
#header,
.fix-sticky,
.modal__toggle,
#category-search img{
	transition:all .6s cubic-bezier(.19,1,.22,1);
}

ul.slidemenu__nav li a span,
ul.slidemenu__nav li a:after {
     transition:none;
}

@media screen and (min-width: 750px) {


}

@media screen and (min-width: 1200px) {

    .slidemenu__nav 
        transition:none;
    }
	
	#navigation,
	ul.slidemenu__nav li a span,
    ul.slidemenu__nav li a:after {
        transition: .3s; /* 縺ｪ繧√ｉ縺句､牙喧 */
    }

}

/* スライダー部
─────────────────────────────────────────*/
.slick-list,.slick-slider,.slick-track{position:relative;display:inline-block;}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover{outline:0;color:transparent}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:visible;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:inline-block}.slick-vertical .slick-slide{display:inline-block;height:auto;}
.slick-prev,.slick-next{
position:absolute;height:22px;width:13px;line-height:0;font-size:0;cursor:pointer;top:50%;margin-top:-11px;padding:0;border:none;background:0 0;z-index:2; 
background-color: transparent;border-radius: 4px;
}

.slick-dots {display: none; position: absolute;bottom: -25px; font-size:0;line-height:0;text-align:center;margin:0 0 0;padding:0;width:100%;}
.slick-dots li{vertical-align:top;display:inline-block;margin:0 6px;}
.slick-dots li button{background-color:#CCC;border-radius:100%;font-size:0px;height:5px;width:5px;cursor:pointer;border-style:none;padding: 0;}
.slick-dots li.slick-active button{background-color:#1a1a1a!important;}


.pageslick .slick-dots li button{background-color:#EFEFEF;border-radius:0;font-size:0px;height:3px;width:50px;cursor:pointer;border-style:none;padding: 0;}
.pageslick .slick-dots li.slick-active button{background-color:#1a1a1a}
.slider{display: none;}
.slider.slick-initialized{display: inline-block; /*slick-initializedが付与されたら表示*/}

ul#relatednews .slick-list{overflow:hidden;margin:0;padding:0;}
ul#relatednews .slick-prev,ul#relatednews .slick-next{
    top:50%;margin-top:-11px;
}

.slick-prev {
    left: 20px;
	background-image: url("../images/icon/list-arrow-black2.svg");
	background-size: cover;
}

.slick-next {
    right: 20px;
	background-image: url("../images/icon/list-arrow-black.svg");
	background-size: cover;
}

#TopBlock03 .slick-list {
}

@media screen and (min-width: 1024px) {

    .slick-prev {
        left: 0px;
        background-image: url("../images/icon/list-arrow-black2.svg");
        background-size: cover;
    }

    .slick-next {
        right: 0px;
        background-image: url("../images/icon/list-arrow-black.svg");
        background-size: cover;
    }

    #TopBlock03 .slick-dots {bottom: 100px;}
}

/*
===== html, body ==========================================
*/
html, body {
	width: 100%;
    height: 100%;
}

html {
    -webkit-text-size-adjust: 100%;
    background-color: #fff;
}

body {
	font-family: 'M PLUS 1p', sans-serif;
	position: relative;
	height: 100%;
	min-height: 100%;
	overflow: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.8;
	color: #000;
}

body.stopper { position:fixed;}
body.nonestopper { position:relative;overflow: auto; }

@media screen and (min-width: 1024px) {
    body.stopper { position:relative;}
}


/*
===== link ==========================================
*/
a {color: #000;text-decoration: none;}
a:focus, *:focus { outline:none; }
a:hover {color: #B43282;}
a:focus {outline: none;}
.pc {display: none;}
.sp {display: block;}

@media screen and (min-width: 1024px) {

    .pc {display: block;}
    .sp {display: none;}

}

/*
===== common ==========================================
*/
.clear{float:none}.clear,.clearfix:after{clear:both;display:block;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0}.clearfix:after{content:""}

/* =================================================================
Layout
=================================================================*/

#container {
	margin: 0px;
	width:100%;
	position: relative;
	height:auto !important; /*IE6対策*/
	min-height: 100%;
	overflow: hidden;
}

#wrapper {
	width: 100%;
	min-height: 100%;
	margin:0 auto;
	position: relative;
	background-color: #fff;
}

/* ヘッダー ─────────*/

#header {
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height: 60px;
	background-color: rgba(255,255,255,1);
	border-bottom: solid 1px #fff;
	z-index: 13;
}

#header.home {
	background-color: rgba(255, 255,255,0);
	border-bottom: none;
}

.stopper #header {top: 0;left: 0;}

#header.fixed {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,1);
	height: 60px;
	border-bottom: solid 1px #ccc;
}

#header + .fix-sticky{height:60px!important;}
#header + .fix-sticky#home{height:0px!important;}

#header h1,
#Instead_of_h1{
    position: absolute;
	text-align: center;
	max-width: 170px;
	width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
	line-height: 1.4;
}

#header h1 img,
#Instead_of_h1 img{
    vertical-align: middle;
	width: auto;
	height: 22px;
}

#header.home h1 {
    display: none;
}

#header.fixed.home h1 {
    /*display: block;*/
	display: none;
}

#header.fixed.home h1 {
    font-family: rift-soft, sans-serif;
	max-width: 200px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 1.2;
}

#header.fixed.home h1 b {
    display: block;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
}

/* タイトル ─────────*/

#title {
    position: absolute;
	top: 13px;
	left: 5%;
	max-width: 60px;
	width: 100%;
	z-index:18;
	transition: all .6s;
}

#header.fixed #title {
	top: 13px;
	max-width: 60px;
	transition: all .6s;
}

#header.home #title {
	top: 25px;
}

#header.home.fixed #title {
	top: 13px;
}

/*====================================== 
	PC > 1024px
=======================================*/

@media screen and (min-width: 1024px) {

    #container {
        padding: 0;
    }

    #wrapper {
        width: 100%;
        margin:0 auto;
		padding-top: 0;
		padding-bottom: 530px;
        position: relative;
		background-color: #fff;
    }
	
	#wrapper.english {
		padding-bottom: 200px;
	}
	
	#Normal #wrapper {
		min-height: 100%;
		padding-bottom: 250px;
    }
	
	/* ヘッダー ─────────*/
	
	#header {
        position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(255, 255,255,1);
		width: 100%;
		height: 128px;
    }
	
	#header.home {
        background-color: rgba(255, 255,255,0);
		border-bottom: none;
    }
	
	#header.fixed {
		background-color: rgba(255,255,255,1);
		height: 60px;
		border-bottom: solid 1px #ccc;
    }
	
    #header + .fix-sticky{height:128px!important;}
	
	#header h1,
	#Instead_of_h1{
	    display: none;
    }
	
	#header.fixed.home h1 {
        display: none;
    }
	
	#header.fixed + .fix-sticky{height:0px;}
    #header.second.fixed + .fix-sticky{height:0px;}
	
	/* タイトル ─────────*/
	
	#title {
        top: 45px;
        left: 2%;
        max-width: 70px;
		z-index: 21;
    }
	
	#header.fixed #title {
	    max-width: 60px;
		top: 13px;
        left: 30px;
    }
	
	#header.home #title {
        top: 45px;
    }
	
	.modalmenu .intitle {
        display: none;
    }

}

@media screen and (min-width: 1112px) {

	#title {
        left: 4%;
    }
	
}

@media screen and (min-width: 1200px) {

	#title {
        top: 40px;
        left: 50px;
        max-width: 70px;
    }
	
}

#navigation {
    display:block;
	font-size: 0px;
	line-height: 0px;
	width: 100%;
	margin: 0;
}

.slidemenu {
    display: none;
    position:relative;
    z-index:1;
    height: 100%;
    width: 100%;
}
	
/* ul ─────────*/
.slidemenu__nav {
    vertical-align: top;
    display: table-cell;
    width: 100%;
    height:100%;
    padding-top:23%;
    top:-100%!important;
    left:0;
    overflow:auto;
    position:fixed;
}
	
ul.slidemenu__nav li {
    display: block;
    width: 100%;
    text-align: center;
}
	
ul.slidemenu__nav li.non {
    display: block;
}

.slidemenu__nav > li {
    width: 100%;
    border-right: 0;
}

ul.slidemenu__nav li a {
    font-family: rift-soft, sans-serif;
	font-weight: 700;
	display: block;
    height: auto;
    padding:0;
    margin: 0px 0 17px 0;
    color: #000;
    line-height:1.4;
    font-size: 30px;
    letter-spacing: 0.03em;
}

ul.slidemenu__nav li a span {
	display: block;
	font-size: 14px;
}

ul#language {
    position: absolute;
	top: 55px;
	right: 140px;
    display: none;
	z-index: 20;
	transition:all .6s cubic-bezier(.19,1,.22,1);
}

#header.fixed ul#language {
	top: 22px;
}

ul#language li {
    display: inline-block;
	vertical-align: top;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.05em;
}

ul#language li:first-of-type:after {
    content: '/';
	display: inline-block;
	margin: 0 3px;
}

ul#language li a {
    color: #9FA0A0;
}

ul#language li.active a {
    position: relative;
	color: #000;
}

ul#language li a:hover {
    color: #000;
}

ul#language li.active a:after {
    content: '';
	position: absolute;
	display: inline-block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #000;
}

/*====================================== 
	PC > 1024px
=======================================*/

@media screen and (min-width: 1024px) {

    ul#language {
        display: inline-block;
    }

    #navigation {
	    position: absolute;
		width: 100%;
		left: 0;
		top: 0;
	    padding: 50px 0 0 12%;
        margin: 0;
		overflow: visible;
    }
	
	#header.fixed #navigation {
	    padding: 17px 0 0 150px;
	}
	
	.slidemenu {
        display: block;
    }
	
	/* ul ─────────*/
    .slidemenu__nav {
        display: block;
        width: 100%;
        height:auto;
		padding: 0;
        overflow: visible;
        position:relative;
        background-color:transparent;
    }
	
	ul.slidemenu__nav li {
        display: inline-block;
        width: auto;
        text-align: left;
		padding: 0 2.6% 0 0;
    }
	
	ul.slidemenu__nav li a {
        display: block;
		height: 81px;
        padding:0;
        margin: 0;
        color: #000;
        line-height:1.4;
        font-size: 19px;
        letter-spacing: 0.05em;
		font-weight: 700;
		position: relative;
	}
	
	ul.slidemenu__nav li a b {
        display: block;
		padding: 0 0 3px;
		font-weight: 700;
    }
	
	ul.slidemenu__nav li a:after {
	    content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 1px;
		background-color: #000;
		top:30px;
		left: 0;
	}
	
	ul.slidemenu__nav li > ul li a:after {
	    content:none!important;
	}
	
	ul.slidemenu__nav li.on a:after,
	ul.slidemenu__nav li:hover a:after{
		width: 100%;
		height: 1px;
	}
	
	ul.slidemenu__nav li a span {
	    position: absolute;
        display: block;
        font-size: 11px;
		line-height: 1;
		white-space: nowrap;
		left: 0;
		top: 40px;
		letter-spacing: -1em;
		color:transparent;
    }
	
	ul.slidemenu__nav li.on a span,
	ul.slidemenu__nav li:hover span {
        display: block;
        font-size: 11px;
		line-height: 1;
		letter-spacing: 0.1em;
		color:#000;
		visibility: visible;
    }
	
	#header.fixed ul.slidemenu__nav li a span {
	    visibility: hidden;
		color:transparent;
	}
	
	/* プルダウン ─────────*/
	ul.second-level {
        visibility: hidden;
        opacity: 0;
        z-index: 1;
    }
	
	ul.second-level li {
    }
	
	ul.slidemenu__nav ul.second-level li a {
        font-size: 16px;
		line-height:1.4;
		padding: 3px;
		height: auto;
		color: #fff;
    }
	
	ul.slidemenu__nav ul.second-level li a:hover {
		color: #FFD800;
    }
	
	li.mega ul.second-level {
        position: absolute;
        top: 100px;
        left: 0;
        box-sizing: border-box;
        width: 88%;
        padding: 20px 2%;
        background: #FBFFFE;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
    }

    li.mega:hover ul.second-level {
        top: 80px;
        visibility: visible;
        opacity: 1;
    }

    li.mega ul.second-level > li {
        float: left;
        width: 32%;
        border: none;
    }

    li.mega ul.second-level > li:nth-child(3n+2) {margin: 0 1%;}
	
	ul.slidemenu__nav li.micro {position: relative;}
	
	li.micro ul.second-level {
        position: absolute;
        top: 100px;
        left: 0;
        box-sizing: border-box;
        width: auto;
        padding: 20px;
        background-color: rgba(0,0,0,0.9);
    }

    li.micro:hover ul.second-level {
        top: 80px;
        visibility: visible;
        opacity: 1;
    }
	
	#header.fixed li.micro:hover ul.second-level {
        top: 42px;
    }

    li.micro ul.second-level > li {
        width: 100%;
		padding: 0;
        border: none;
		white-space: nowrap;
    }
	
	li.grandchild {white-space: normal!important;}
	li.grandchild a {white-space: nowrap;}
	
	/* プルダウン ─────────*/
	ul.third-level {}
	
	ul.third-level li {
		width: 100%;
		padding: 0;
		white-space: nowrap;
    }
	
	ul.slidemenu__nav ul.third-level li a {
        display: block;
		font-size: 16px;
		line-height:1.4;
		padding: 3px;
		height: auto;
    }

}

@media screen and (min-width: 1112px) {
    #navigation {padding: 48px 0 0 13%;}	
	li.micro ul.second-level {-webkit-transition: all .2s ease;transition: all .2s ease;}
}

@media screen and (min-width: 1200px) {
	ul.slidemenu__nav li {padding: 0 58px 0 0;}
	ul.slidemenu__nav li a {font-size: 21px;}	
}

@media screen and (min-width: 1440px) {
    #navigation {padding: 48px 0 0 185px;}
}

/* モーダルメニュー ───────────────────────────*/
.modalmenu {
    position: relative;
	z-index: 20;
}

.modal__toggle__bar {
    display: block;
	margin: 0 auto;
    width: 18px;
    height: 4px;
    background-color: #000;
	transition: all .4s;
}

.modal__toggle__bar + .modal__toggle__bar {
    margin-top: 3px;
}

.modal__toggle--active .modal__toggle__bar {
    margin: 0;
    position: absolute;
    top: 18px;
    left: 10px;
	height: 4px;
	width: 18px;
}

.modal__toggle--active .modal__toggle__bar:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.modal__toggle--active .modal__toggle__bar:nth-child(2) {
    opacity: 0;
}

.modal__toggle--active .modal__toggle__bar:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
	
/* ハンバーガー ─────────*/
.modal__toggle {
    display: block;
    position:fixed; 
    top:10px;
    right:15px;
    z-index:5;
    padding: 0 0 0 0;
    background-color: #fff;
    width: 40px;
    height: 40px;
	outline: none;
	border: none;
	font-size: 16px!important;
	border: solid 1px #000;
	border-radius: 100%;
	cursor: pointer;
	touch-action: manipulation;
}

#header.home .modal__toggle {
    top:22px;
}

#header.fixed .modal__toggle {
    top:10px;
    right:15px;
}
	
.modal__toggle:after {
    content:none;
    display:block;
    font-size:11px;
    font-weight:700;
    color:#fff;
    text-align: center;
    margin: 5px 0 0 0;
}
	
.modal__toggle--active:after {
    content:none;
	margin: 20px 0 0 0;
    color:#fff;
}
	
/* ul ─────────*/
.modal__nav {
    font-size: 0;
    display: block;
    width: 100%;
    height:100%;
	top: 30px;
    position:fixed;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color:#EFEFEF;
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
	will-change: transform;
}

.modalmenu .intitle {
    position: absolute;
	top: 13px;
	left: 5%;
	max-width: 60px;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all .6s;
}

#header.home .modalmenu .intitle {
	top: 25px;
}

#header.home.fixed .modalmenu .intitle {
	top: 13px;
}

.modal__nav.modal__nav--open .intitle {
    opacity: 1;
	visibility:visible;
}

.modal_nav_inner {
	width: 100%;
	padding: 60px 20px 20px;
	margin: 0 auto;
}
	
.modal__nav.modal__nav--open {
    opacity: 1;
	visibility:visible;
	top:0!important;
    left:0;
}
	
.modal__nav li {height: auto!important;}
.modal__nav.modal__nav--open li {display:block;}
	
.modal__nav li {
    display: block;
    width: 100%;
    text-align: left;
}
	
.modal__nav li.non {
    display: block;
}

.modal__nav > li {
    width: 100%;
    border-right: 0;
}

.modal__nav li a {
	font-weight: 700;
	display: block;
    height: auto;
    padding:0;
    margin: 0px 0 7px 0;
    color: #000;
    line-height:1.4;
    font-size: 15px;
    letter-spacing: 0.03em;
}

.modal__nav li.on {
    position: relative;
}

.modal__nav li a h2 {
    font-family: rift-soft, sans-serif;
	line-height:1.4;
    font-size: 28px;
	letter-spacing: 0.2em;
	margin-bottom: 0px;
}

.modal__nav li a span {
	display: inline-block;
	font-size: 12px;
	margin-left: 20px;
}

.modal__nav ul.links {
    padding: 0 0 0 0!important;
}

.modal__nav ul.links li {
    display: inline-block;
	vertical-align: top;
    width: 45px!important;
	padding: 0 12px 0 0!important;
}

.modal__nav ul#first-block,
.modal__nav ul#second-block,
.modal__nav ul#third-block,
.modal__nav ul#fourth-block{
	display:inline-block; 
	width: 100%!important;
	vertical-align: top;
}

.modal__nav ul li.no-first {
    width: 92%;
	border-bottom: none;
	margin: 30px 4% 0;
	padding: 0 0 9px;
}

/* ENGLISH ─────────*/

.english .modal__nav ul li.no-first {
	margin: 15px 4% 0;
}

.english .modal__nav ul#first-block{padding-top: 80px;}
.english .modal__nav li.language {padding-top: 60px;}


.modal__nav ul li.no-second, 
.modal__nav ul li.no-third, 
.modal__nav ul li.no-fourth, 
.modal__nav ul li.no-fifth, 
.modal__nav ul li.no-sixth, 
.modal__nav ul li.no-seventh, 
.modal__nav ul li.no-eighth {
    width: 92%;
	border-bottom: none;
	margin: 0 4% 0;
	padding: 0 0 9px;
}

.modal__nav ul li.no-seventh.sp, 
.modal__nav ul li.no-eighth.sp {
	border-bottom: none;
}

.modal__nav ul li.no-first,
.modal__nav ul li.no-third,
.modal__nav ul li.no-fifth,
.modal__nav ul li.no-sixth{
}

.modal__nav ul li > ul {
    padding: 0 0 0 2px;
}

.modal__nav ul li.no-third.pc,
.modal__nav ul li.no-fifth.pc,
.modal__nav ul li.no-sixth.pc,
.modal__nav ul li.no-seventh.pc,
.modal__nav ul li.no-eighth.pc{
	display: none;
}

.secondlist li a:before {
    content: '';
	display: inline-block;
	vertical-align: middle;
	background-image: url("../images/icon/list-arrow.svg");
	background-size: 6px 14px;
	width: 6px;
	height: 14px;
	margin-right: 8px;
}

.modal__nav ul li ul.thirdlist {
    padding: 0 0 15px 14px;
}

.thirdlist li a:before {
    content: '';
	display: inline-block;
	vertical-align: middle;
	background-image: url("../images/icon/list-line.svg");
	background-size: 12px 14px;
	width: 12px;
	height: 14px;
	margin-right: 8px;
}

.modal__nav .thirdlist li a {
	font-weight: 400;
	display: block;
    height: auto;
    padding:0;
    margin: 0px 0 10px 0;
    color: #000;
    line-height:1.4;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.modal__nav li p {
    display: block;
    line-height:1.4;
    font-size: 16px;
	padding: 20px 0 0 14px;
	letter-spacing: 0.05em;
}

.modal__nav li p span {
    position: relative;
}

.modal__nav li p a {
	display: inline-block;
	font-weight: 400;
	color: #A1A1A1;
}

.modal__nav li p span.active:after {
    content: '';
	position: absolute;
	display: inline-block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #000;
}

@media screen and (min-width: 1024px) {

    .modal__nav li p {
        display: none;
    }

    /* ハンバーガー ─────────*/
    .modal__toggle {
        top:40px;
        right:40px;
		width: 44px;
		height: 44px;
    }
	
	#header.home .modal__toggle {
        top:40px;
    }
	
    #header.home.fixed .modal__toggle {
        top:10px;
    }
	
	.modal__toggle--active .modal__toggle__bar {
        top: 20px;
        left: 12px;
        height: 4px;
        width: 18px;
    }

    .modal_nav_inner {
        position: absolute;
        width: 92%;
        padding: 0 0 0 8%;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit- transform: translateY(-50%) translateX(-50%);
    }
	
	.modal__nav li a h2 {
        margin-bottom: 20px;
    }
	
	.modal__nav li a span {
        display: block;
        font-size: 10px;
		margin-left: 0;
    }

    .modal__nav ul#first-block,
    .modal__nav ul#second-block,
    .modal__nav ul#third-block,
    .modal__nav ul#fourth-block{
        display:inline-block; 
        width: 25%!important;
        vertical-align: top;
    }
	
	.modal__nav ul li.no-first, 
    .modal__nav ul li.no-second, 
    .modal__nav ul li.no-third, 
    .modal__nav ul li.no-fourth, 
    .modal__nav ul li.no-fifth, 
    .modal__nav ul li.no-sixth, 
    .modal__nav ul li.no-seventh, 
    .modal__nav ul li.no-eighth {
        width: 80%;
        border-bottom: solid 1px #ACACAC;
        margin: 30px 0 0;
        padding: 0 0 20px;
    }

    .modal__nav ul li.no-second, 
    .modal__nav ul li.no-fourth, 
    .modal__nav ul li.no-seventh, 
    .modal__nav ul li.no-eighth {
        border-bottom: none;
    }
	
	.modal__nav ul li.no-third.pc,
	.modal__nav ul li.no-fifth.pc,
	.modal__nav ul li.no-sixth.pc,
	.modal__nav ul li.no-seventh.pc,
	.modal__nav ul li.no-eighth.pc{
        display: inline-block;
    }
	
	.modal__nav ul li.no-third.sp,
	.modal__nav ul li.no-fifth.sp,
	.modal__nav ul li.no-sixth.sp,
	.modal__nav ul li.no-seventh.sp,
	.modal__nav ul li.no-eighth.sp{
	    display: none;
	}
	
	.modal__nav li a {
        opacity: 1;
        transition: all .2s;
    }

    .modal__nav li a:hover,
    .modal__nav .thirdlist li a:hover{
        color: #009FE8;
    }

    .modal__nav ul.links li a:hover {
        opacity: 0.5;
    }

}

/* ------ TOPIMAGE ------- */

#Topimage {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    z-index:2;
	will-change: transform;
}

#Topimage .container {
    height: 100%;
    -moz-background-size:cover;
    background-size:cover;
    width: 100%;
    z-index: 100;
    text-align: center;
    *zoom:1;
	background-image: url("../images/img/en/top-english_sp.svg");
}

@media screen and (min-width: 1024px) {

    #Topimage .container {
        background-image: url("../images/img/en/top-english.svg");
    }

}

#Secondimage {
    position: relative;
	z-index: 2;
    width: 100%;
	margin-bottom: 40px;
}

ul.pageslick li,
ul.detailimage li{
    position: relative;
	overflow: hidden;
}

ul.pageslick li figure:before,
ul.detailimage li figure:before{
    content:"";
    display: block;
    padding-top: 70%; /* 高さを幅の75%に固定 */
	z-index: 1;
}

ul.pageslick li b img {
    width: 100%;
}

#Secondimage.company #PageContents figure {
    position: relative;
	width: 106%;
	margin: 0 -3%;
    box-shadow:1px 0px 20px 1px #ccc inset;
}

#Secondimage.company #PageContents figure:before {
    content:'';
	display: block;
    padding-top: 40%; /* 高さを幅の75%に固定 */
    z-index: 1;
    will-change: transform;
}

#Secondimage.company #PageContents figure,
ul.pageslick li figure,
ul.detailimage li figure{
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	z-index: 1;
	text-align: center;
	*zoom:1;
}

ul.pageslick li figure:after,
ul.detailimage li figure:after{
    content: '';
    background: inherit;
    /*-webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);*/
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    z-index: -1;
	will-change: transform;
}

ul.pageslick li figure var,
ul.detailimage li figure var{
    display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0.3;
}

ul.pageslick li figure h2,
ul.detailimage li figure h2{
    position: absolute;
	width: 40%;
	max-width: 400px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

ul.pageslick li figure h2.left,
ul.detailimage li figure h2.left{
    left: 30%;  
}

p#MiniTag,#SnsData {display: none;}

#Secondimage.service #PageContents {
    text-align: center;
    background-color: #fafafa;
}
	
#Secondimage.service #PageContents img {
    width: auto;
    max-height: 600px;
}


#Secondimage.brand #PageContents {
    text-align: center;
    background-color: #000000;
}
	
#Secondimage.brand #PageContents img {
    width: auto;
    max-height: 600px;
}

ul.pageslick li img.pc {display: none}
ul.pageslick li img.sp {display: inline-block}

/*====================================== 
	PC > 1024px
=======================================*/

@media screen and (min-width: 1024px) {

    ul.pageslick li img.pc {display: inline-block}
    ul.pageslick li img.sp {display: none}

    ul.pageslick#Oneimage {
        padding: 0 15%;
    }

    ul.pageslick li figure:before {
        padding-top: 23%; /* 高さを幅の75%に固定 */
    }
	
	#Secondimage.detail ul.pageslick li figure:before {
        padding-top: 42%; /* 高さを幅の75%に固定 */
		will-change: transform;
    }
	
	ul.detailimage li figure:before {
        padding-top: 42%; /* 高さを幅の75%に固定 */
		will-change: transform;
    }
	
	#Secondimage.company #PageContents figure:before {
        padding-top: 23%; /* 高さを幅の75%に固定 */
        will-change: transform;
    }
	
	#Secondimage.service p#MiniTag {
        top: 50%;
        left: 4%;
		margin-top: -35px;
    }
	
	#Secondimage.brand p#MiniTag {
        top: 50%;
        left: 4%;
		margin-top: -25px;
    }
	
	#Secondimage.detail p#MiniTag {
        bottom: 36%;
        left: 4%;
    }
	
	#Secondimage.company p#MiniTag {
        top: 90%;
        left: 7%!important;
    }
	
	#Secondimage.topservice p#MiniTag {
	    top: 90%;
        left: 4%;
	}

    #SnsData {
        display: block;
		position: fixed;
        right: 55px;
        top: 48%;
        z-index: 100000;
        width: 24px;
        margin-top: -60px;
    }

    #SnsData ul {
        width: 100%;
        font-size: 0;
    }

    #SnsData ul li {
        display: block;
        width: 100%;
        text-align: center;
        margin: 15px 0;

    }
	
	p#MiniTag {
        position: absolute;
		display: inline-block;
        top: 300px;
        left: 4%!important;
        max-width: 20px;
        width: 20px;
    }
	
	p#MiniTag img {
	}

}

/*====================================== 
	iPad Pro(10.5) 	1112px x 834px
	iPad Pro(11) 	1194px x 834px
	iPad Pro(12.9) 	1366px x 1024px
=======================================*/

@media screen and (min-width: 1112px) {


}

/*====================================== 
	PC > 1200px
=======================================*/

@media screen and (min-width: 1200px) {

	
}


/*iPhone 11 Pro 2436x1125px at 458ppi */
@media only screen 
    and (max-width: 896px)
	and (orientation : landscape) {

	
	
}

/* ==================================================================================================================================
         Contents
=================================================================*/

#Contents {
	width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 3;
}

#Main {width: 100%;}
#Main.gray {background-color: #EEEEEE;padding: 3% 0 0;}
#Main.gray topper {padding: 0 0 0;}
#Main.lightgray {background-color: #F6F7F7;padding: 5% 0 0;}

/* TOPPAGE ここから ───────────────────────────*/

#TopBlock01 {
    width: 100%;
	background-color: #F7F8F8;
}

#TopBlock01 .inner {
    max-width: 1200px;
    width: 92%;
	margin: 0 auto;
	padding: 60px 0 30px;
}

#TopBlock01 dl {
    display: table;
	width: 100%;
	font-size: 0;
}

#TopBlock01 dl dt,
#TopBlock01 dl dd {
    display: block;
}

#TopBlock01 dl dt {
    width: 100%;
	padding: 5% 0;
}

#TopBlock01 dl dd {
    width: 100%;
	padding: 5% 0;
}

#TopBlock01 dl dd p {
    font-size: 15px;
	line-height: 2;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

#TopBlock01.eng dl dd p {
    font-size: 14px;
	line-height: 1.8;
	font-weight: 400;
	text-align: left;
	white-space: normal;
}

#TopBlock01 dl dd br.spbr {
        display: inline-block;
    }	

@media screen and (min-width: 1024px) {

    #TopBlock01 dl dt,
    #TopBlock01 dl dd {
        display: table-cell;
        vertical-align: middle;
    }

    #TopBlock01 dl dt {
        width: 45%;
        padding: 5% 1% 2% 0;
    }

    #TopBlock01 dl dd {
        width: 55%;
        padding: 5% 0 2% 5%;
    }
	
	#TopBlock01 dl dd p {
        font-size: 1.8vw;
        line-height: 2;
        font-weight: 800;
		text-align: left;
    }
	
	#TopBlock01 dl dd br.spbr {
        display: none;
    }

}

@media screen and (min-width: 1480px) {

    #TopBlock01 dl dd p {
        font-size: 27px;
        line-height: 2;
        font-weight: 800;
    }

}

/* TOPNEWS ここから ───────────────────────────*/

#TopBlock02 {
    width: 100%;
	background-color: #fff;
	padding: 60px 0 30px;
}

#TopBlock02 header {
    text-align: center;
	margin-bottom: 20px;
}

#TopBlock02 header h2 {
    max-width: 300px;
	width: 100%;
	margin: 0 auto;
}

#TopBlock02 header h2 span {
    display: block;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	margin-top: 20px;
}

#TopBlock02 header h2 img {
    width: auto;
	height: 50px;
}


/* TOPWORKS ここから ───────────────────────────*/

#TopBlock03 {
    width: 100%;
	background-color: #EEEEEE;
	padding: 60px 0;
	will-change: transform;
}

#TopBlock03 header {
    text-align: center;
	margin-bottom: 60px;
}

#TopBlock03 header h2 {
    max-width: 300px;
	width: 100%;
	margin: 0 auto;
}

#TopBlock03 header h2 span {
    display: block;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	margin-top: 20px;
}

#TopBlock03 header h2 img {
    width: auto;
	height: 50px;
}

@media screen and (min-width: 750px) {

    #TopBlock01 .inner {
        padding: 60px 0 60px;
    }

    #TopBlock02 {
        padding: 100px 0;
    }
	
	#TopBlock02 header {
        margin-bottom: 30px;
    }

    #TopBlock03 {
        padding: 100px 0;
    }
	
	#TopBlock03 header {
        margin-bottom: 140px;
    }

}

#Worksimage {
    width: 100%;
	text-align: center;
	position: relative;
	margin: 0 auto 120px;
}

#Worksimage li {
	display: inline-block;
	vertical-align: middle;
	text-align: center!important;
	margin: 0 0;
	position: relative;
	padding: 0 20px;
	will-change: transform;
}

#Worksimage li figure {
    height: 100%;
    -moz-background-size:cover;
    background-size:cover;
    width: 100%;
    z-index: 100;
    text-align: center;
    *zoom:1;
	transition: all .3s;
	box-shadow:1px 3px 5px 3px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	will-change: transform;
}

#Worksimage li figure:before{
    content:"";
    display: block;
    padding-top: 100%; /* 高さを幅の75%に固定 */
	z-index: 1;
}

#Worksimage li.slider.slick-center {}

#Worksimage li p {
    position: absolute;
	bottom: -33%;
	left: 0;
	display: block;
	width: 100%;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	color: #000;
    font-size: 15px;
	line-height: 1.8;
	color: #000;
	visibility: hidden;
	padding: 0 20px;
}

#Worksimage li.slider.slick-center p {
    visibility: visible;
	transition: .3s; /* 縺ｪ繧√ｉ縺句､牙喧 */
}

#Worksimage li p time {
    display: block;
	font-size: 13px;
	font-weight: 700;
}

#TopBlock03 .slick-dots li button{background-color:#fff;border-radius:0;font-size:0px;height:3px;width:50px;cursor:pointer;border-style:none;padding: 0;}

#TopBlock03 .slick-dots {position: absolute; bottom:-11%;transition: all .3s;}
#TopBlock03 .slick-dots li { margin: 0 6px!important;padding: 0;}


@media screen and (min-width: 750px) {

      #TopBlock03 .slick-dots {bottom:-15%;}
	  
	  #Worksimage {
          margin: 0 auto 200px;
      }

      #Worksimage li {
          display: inline-block;
          vertical-align: middle;
          text-align: center!important;
          margin: 0 0.8%;
      }

      #Worksimage li.slider.slick-center figure {
          transform : scale(1.2,1.2);
      }

      #Worksimage li figure:before{
          padding-top: 45%; /* 高さを幅の75%に固定 */
      }

      #Worksimage li p {
          bottom: -60%;
          font-size: 15px;
      }
	  
	  #Worksimage li.slider {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        transition: all .3s;
        will-change: transform;
    }

    #Worksimage li.slider.slick-center {
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: grayscale(0);
    }

    #Worksimage li.slider.slick-center figure {
        transition: .3s; /* 縺ｪ繧√ｉ縺句､牙喧 */
        will-change: transform;
    }

    #Worksimage li.slider.slick-center figure:hover {
        -moz-transform: scale(1.3,1.3);
        -webkit-transform: scale(1.3,1.3);
        -o-transform: scale(1.3,1.3);
        -ms-transform: scale(1.3,1.3);
    }
	
	#Worksimage li.slider.slick-center p:hover {
        color: #E3007F;
    }
	  
	  #TopBlock03 .slick-dots {position: absolute; bottom:-30%;transition: all .3s;}

}

/* ENGLISH ───────────────────────────*/

#TopBlock01.eng header{
    text-align: center;
	padding-top: 40px;
	margin-bottom: 20px;
}

#TopBlock01.eng header h2{
    max-width: 300px;
	width: 100%;
	margin: 0 auto;
}

#TopBlock01.eng header h2 img{
    width: auto;
	height: 35px;
}

.engblock{
    width: 100%;
	padding: 80px 0 80px;
}

.eng_inner {
	width: 92%;
	max-width: 900px;
	margin: 0 auto;
}

#TopBlockEng02,
#TopBlockEng04,
#TopBlockEng06{
    background-color: #fff;
}

#TopBlockEng03,
#TopBlockEng05{
    background-color: #F7F8F8;
}

.engblock header{
    text-align: center;
	padding-top: 20px;
	margin-bottom: 30px;
}

.engblock header h2{
    max-width: 300px;
	width: 100%;
	margin: 0 auto;
}

.engblock header h2 img{
    width: auto;
	height: 35px;
}

.engblock h3 {
	font-family: rift-soft, sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 20px;
	text-align: center;
}

.engblock h3.worksfirst {
    margin-top: 30px;
}

dl.access_eng,
dl.business_eng,
dl.works_eng{
    font-size: 0;
	width: 100%;
}

dl.access_eng dt,
dl.access_eng dd,
dl.business_eng dt,
dl.business_eng dd,
dl.works_eng dt,
dl.works_eng dd{
    display: inline-block;
	vertical-align: middle;
}

dl.business_eng:nth-child(2){
    margin: 50px 0;
}

dl.access_eng dt {
    width: 100%;
}

dl.access_eng dd {
    width: 100%;
	font-size: 13px;
	line-height: 1.6;
	padding: 0 0 0 20%;
}

dl.access_eng dd {
    width: 100%;
    padding: 0 0 0 0;
}

/* 動画
─────────────────────────────────────────*/	
dl.access_eng dt {
	position: relative;
	padding-bottom: 56.25%;
	margin-top:20px;
	height: 0;
	overflow: hidden;
	margin-bottom: 20px;
}

dl.access_eng dt iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

dl.business_eng dt {
    width: 50%;
    padding: 0;
	margin: 0 auto;
	display: block;
}

dl.business_eng dd {
    padding: 0 5%;
}

dl.business_eng dd p {
	font-size: 13px;
	line-height: 1.6;
}

dl.works_eng {
    padding: 10px 0 10px;
}

dl.works_eng dt {
    width: 100%;
	padding: 0 10%;
}

dl.works_eng dd {
    width: 100%;
}

dl.works_eng dd p {
	font-size: 13px;
	line-height: 1.6;
}

dl.works_eng dd ul {
    width: 100%;
	text-align: center;
	padding-top: 40px;
}

dl.works_eng dd ul li {
    display: inline-block;
	vertical-align: top;
	width: 45%;
}

dl.works_eng dd ul li:first-of-type {
    margin-right: 4%;
}

dl.works_eng dd ul li a {
    display: block;
	padding: 10px 10px;
	background-color: #EFEFEF;
	border-radius: 5px;
}

ul.contact_eng {
    width: 100%;
	text-align: center;
	padding-top: 40px;
}

ul.contact_eng li {
    display: block;
	margin: 0 auto 20px;
	width: 50%;
}

ul.contact_eng li a {
    display: block;
	padding: 10px 20px;
	background-color: #F7F8F8;
	border-radius: 5px;
	border:solid 1px #000;
}

ul.contact_eng li:first-of-type a {
	background-color: #fff;
	border:solid 1px #FFFFFF;
}

@media screen and (min-width: 760px) {

    .engblock header{
        margin-bottom: 80px;
    }
	
    .engblock header h2 img,
    .engblock header h2 img{
        height: 40px;
    }
	
	.engblock h3 {
        font-size: 28px;
		text-align: left;
		margin-bottom: 10px;
    }
	
	dl.access_eng dt {
        width: 54%;
    }

    dl.access_eng dd {
        width: 46%;
		padding: 0 0 0 10%;
    }
	
	dl.business_eng:nth-child(2){
	    margin: 50px 0;
    }
	
	dl.business_eng dt {
        display: inline-block;
		width: 40%;
		padding: 0 5% 0 10%;
    }

    dl.business_eng dd {
        width: 60%;
		padding: 0 0 0 5%;
    }
	
	dl.works_eng {
	    padding: 40px 0 40px;
	}
	
	dl.works_eng dt {
        width: 30%;
		padding: 0 0;
		float: right;
    }
	
	dl.works_eng.second dt {
	    float: left;
	}
	
	dl.works_eng.second dd {
	    float: right;
		padding: 0 0 0 8%;
	}

    dl.works_eng dd {
        width: 70%;
		float: left;
		padding: 0 8% 0 0;
    }
	
	dl.works_eng dd ul {
        text-align: left;
        padding-top: 40px;
    }
	
	dl.works_eng dd ul li {
        width: 40%;
    }

    dl.works_eng dd ul li a {
        padding: 10px 40px;
    }
	
	.engblock h3.worksfirst {
        margin-top: 0;
    }
	
	ul.contact_eng li {
        margin: 0 auto 20px;
        width: 26%;
    }

    ul.contact_eng li a {
        padding: 10px 40px;
    }

}



/* COMPANY ここから ───────────────────────────*/

.companyblock_upper {
	max-width: 1180px;
	width: 90%;
	margin: 0 auto;
	padding: 0 0 5%;
}

.companyblock_under {
    max-width: 700px;
	width: 90%;
	margin: 0 auto;
}

#WhatsDle {
    padding: 0 0 0;
	font-size: 0;
}

#Vision {
    padding: 60px 0 0;
	font-size: 0;
}

#BusinessField {
    padding: 60px 0 0;
	font-size: 0;
}

#CompanyProfile {
    padding: 60px 0 0;
}

#Access {
    padding: 60px 0 0;
}

#Management {
    padding: 60px 0 0;
}

#CompanyHistory {
    padding: 60px 0 100px;
}

#WhatsDle .leftblock {
	width: 100%;
	padding: 0;
}

#WhatsDle .rightblock{
	width: 100%;
	padding: 0 0 0;
}

#WhatsDle .rightblock p {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 30px;
}

#Vision .leftblock {
	width: 100%;
	padding: 0;
}

#Vision .rightblock{
	width: 100%;
	padding: 0 0 30px;
}

#Vision .leftblock h3,
#Vision .rightblock h3{
    text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
	margin-bottom: 30px;
	letter-spacing: 0.3em;
}

#Vision .leftblock p {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 30px;
}

#Vision .rightblock ol li {
    position: relative;
	font-size: 15px;
	line-height: 1.8;
	padding: 0 0 0 30px;
}

#Vision .rightblock ol li var {
    position: absolute;
	top: 0;
	left: 0;
	width: 30px;
    display: inline-block;
}

#WhatsDle .leftblock,
#WhatsDle .rightblock,
#Vision .leftblock,
#Vision .rightblock,
#BusinessField .leftblock,
#BusinessField .rightblock{
    display: inline-block;
	vertical-align: top;
}

#BusinessField .leftblock {
	width: 100%;
	padding: 0;
}

#BusinessField .rightblock{
	width: 100%;
	padding: 0 0 30px;
}

#BusinessField .leftblock p {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 30px;
}

#BusinessField .leftblock ul {
    padding: 30px 0 0;
}

#BusinessField .leftblock ul li {
    display: inline-block;
	vertical-align: top;
	width: 48%;
	margin-right: 4%;
	margin-bottom: 4%;
	font-size: 12px!important;
	white-space: nowrap;
}

#BusinessField .leftblock ul li a {
	font-size: 13px!important;
}

#BusinessField .leftblock ul li:nth-child(2n){
    margin-right: 0;
}

a.btnblack {
    display: block;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	padding: 15px 5px;
	border:solid 2px #000;
	text-align: center;
	border-radius: 60px;
}

@media screen and (min-width: 1024px) {

    #WhatsDle {padding: 80px 0 60px;}
	#Vision {padding: 40px 0 60px;}
	#BusinessField {padding: 60px 0 60px;}
	#CompanyProfile {padding: 60px 0 60px;}
	#Access {padding: 60px 0 60px;}
	#Management {padding: 60px 0 60px;}

    #WhatsDle .leftblock {
        width: 44%;
        padding: 0;
    }

    #WhatsDle .rightblock{
        width: 56%;
        padding: 0 0 0 70px;
    }

    #Vision .leftblock {
        width: 50%;
		padding-right: 40px;
    }

    #Vision .rightblock{
        width: 50%;
		padding-left: 40px;
    }
	
	#Vision .leftblock h3,
    #Vision .rightblock h3{
        text-align: center;
        font-size: 18px;
    }

    #BusinessField .leftblock {
        float: left;
        width: 52%;
        padding: 0 30px 0 0;
    }

    #BusinessField .rightblock{
        float: right;
        width: 48%;
		padding: 80px 0 30px 40px;
    }

}

.cprofile {
    
}

#CompanyProfile dl {
    font-size: 0;
	padding: 10px 0;
}

#CompanyProfile dl dt,
#CompanyProfile dl dd{
    display: inline-block;
	vertical-align: top;
	font-size: 14px;
	line-height: 1.4;
}

#CompanyProfile dl dt {width: 30%;}
#CompanyProfile dl dd {width: 70%;}

#CompanyProfile dl dd p a {
    text-decoration: underline;
	color: #E3007F;
}

#CompanyProfile dl dd p a:hover {
    text-decoration: none;
}

#Access address {
    text-align: center;
	font-size: 15px;
	line-height: 1.6;
}

#Access address span {
    display: inline-block;
	padding: 0 10px;
}

#Access address ul {
    padding: 20px 0;
}

#Access address ul li {
	font-size: 13px;
	line-height: 1.6;
}

#WhatsDle h2,
#Vision h2,
#BusinessField h2 {
    font-family: rift-soft, sans-serif;
	font-size: 32px;
	line-height:1.4;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
}

#WhatsDle h2 b,
#Vision h2 b,
#BusinessField h2 b {
    font-family: 'M PLUS 1p', sans-serif;
	display: block;
	font-size: 15px;
	line-height:1.4;
	letter-spacing: 0.3em;
}

#CompanyProfile h2,
#Access h2,
#Management h2,
#CompanyHistory h2 {
    font-family: rift-soft, sans-serif;
	font-size: 32px;
	line-height:1.4;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
}

#CompanyProfile h2 b,
#Access h2 b,
#Management h2 b,
#CompanyHistory h2 b {
    font-family: 'M PLUS 1p', sans-serif;
	display: block;
	font-size: 15px;
	line-height:1.4;
	letter-spacing: 0.3em;
}

@media screen and (min-width: 1024px) {

    #WhatsDle h2,
    #Vision h2,
    #BusinessField h2 {
        font-size: 38px;
    }

    #WhatsDle h2 b,
    #Vision h2 b,
    #BusinessField h2 b {
        font-size: 18px;
    }

    #CompanyProfile h2,
    #Access h2,
    #Management h2,
    #CompanyHistory h2 {
        font-size: 38px;
    }

    #CompanyProfile h2 b,
    #Access h2 b,
    #Management h2 b,
    #CompanyHistory h2 b {
        font-size: 18px;
    }

}

#Management dl,
#CompanyHistory dl {
	width: 100%;
	margin: 25px 0;
}

#Management dt,
#CompanyHistory dt {
    position: relative;
    cursor: pointer;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	line-height:1.4;
	letter-spacing: 0.1em;
}

#Management dt {
	text-align: left;
}

#Management dt span {
    position: absolute;
	top: 0.3em;
	left: 130px;
    display: inline-block;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.05em;
}

#Management dt::selection,
#Management dt span::selection,
#CompanyHistory dt::selection {
   outline:none;
}

#Management dt.active,
#CompanyHistory dt.active {
}

#Management dt:after,
#CompanyHistory dt:after {
	content: '';
	display: inline-block;
	position: absolute;
	width: 30px;
	height: 30px;
	margin: auto;
	top: 50%;
	right:-15px;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	background-image: url("../images/img/company/arrow01.svg");
	background-size: 30px 30px;
}

#Management dt.active:after,
#CompanyHistory dt.active:after {
	background-image: url("../images/img/company/arrow02.svg");
}

#Management dt,
#Management dd,
#CompanyHistory dt,
#CompanyHistory dd {
    display: block;
	position: relative;
	width: 100%;
}

#Management dd,
#CompanyHistory dd {
    margin-top: 10px;
    background-color: #EFEFEF;
	padding: 20px 20px;
}

#Management dd ul {
    margin: 0;
	padding: 0;
}

#CompanyHistory dd ul {

}

#CompanyHistory dd ul li {
  position: relative;
  padding: 0 0 10px 100px;
}


#CompanyHistory dd ul li:last-of-type {
    padding-bottom: 0;
}

#CompanyHistory dd ul li span,
#CompanyHistory dd ul li p{
    display: inline-block;
	vertical-align: top;
}

#CompanyHistory dd ul li p{
    margin-bottom: 10px;
}

#CompanyHistory dd ul li p:last-of-type{
    margin-bottom: 0;
}

#CompanyHistory dd ul li span {
    position: absolute;
	top: 0;
	left: 0;
    width: 100px;
}


/* NEWS ここから ───────────────────────────*/
/* article ──────────────────*/
.news-archive {
	width: 100%;
	margin: 0 auto;
}

.news-archive header {
    text-align: center;
	padding: 20px 0 20px;
}

.news-archive header h1{
    font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
}

.newsdetail {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
}

.newsdetail header {
    text-align: justify;
	margin: 10px 0 4%;
}

.newsdetail header h1,
.newsdetail header h2{
    font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 2%;
}

.single {
	width: 100%;
	margin: 0 auto 10%;
	padding: 0;
    background-color: #fff;
	box-shadow:1px 3px 4px 1px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
}

.newsimage img {width: 100%;}
.newsbody {
    padding: 5% 5%;
}

.newsbody h2 {
    font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 4%;
}

.newsbody p b,
.newsbody p strong {
    font-weight: 700!important;
}

/* === 定型文 === */
.fixed_phrase {
    padding: 4% 0;
}

.fixed_phrase.top {
    padding: 0;
}

.fixed_phrase .onebox {
    padding: 4% 0;
}

.fixed_phrase .onebox.sns {
    padding: 5% 0;
}

.fixed_phrase h3 {
    font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 5%;
}

.fixed_phrase .onebox.sns h3 {
    text-align: center;
	margin-bottom: 5%
}

.fixed_phrase .onebox.sns h3 figure {
    max-width: 200px;
	width: 100%;
	margin: 0 auto;
}

#Information {
    padding: 30px 0 80px;
}

#Information h3 {
    max-width: 280px;
	width: 100%;
	margin: 0 auto 30px;
}

#Information p {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
}

#History {
    padding: 0 0 0;
}

#History dl {
	display: table;
	height: 100%;
	width: 100%;
	font-size: 0px;
	line-height: 0px;
	padding:5px 0;
	position: relative;
}

#History dl dt,
#History dl dd {
	font-size: 14px;
	line-height: 1.4em;
	color: #333;
	text-align: left;
	vertical-align: top;
	display: table-cell;
}

#History dl dt {
	width: 10%;
	white-space: nowrap;
	padding: 0 10px 0 0;
}

#History dl dt span {
    position: relative;
	font-size: 10px;
	color: #000000;
}

#History dl dd {
	width: 90%;
	white-space: normal;
	padding: 0;
}

#History dl dd section {
	position: relative;
	padding: 0 0 20px 50px;
}

#History dl dd section span {
    position: absolute;
	top: 0;
	left: 0;
    display: inline-block;
	vertical-align: top;
	text-align: center;
	padding: 2px 2px;
    color: #fff;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
	width: 40px;
	background-color: #9B0002;
}

#History dl dd section span.tv {background-color:#009FE8;}
#History dl dd section span.movie {background-color:#E3007F;}
#History dl dd section span.radio {background-color:#FFD800;}
#History dl dd section span.web {background-color:#231815;}

ul.account_official {
    font-size: 0;
	width: 100%;
	text-align: left;
	padding: 50px 0 20px;
}

ul.account_official li {
    display: inline-block;
	vertical-align: top;
	width: 50%;
	padding: 2%;
}

ul.account_official li a {
    display: block;
	padding: 15px 10px;
	text-align: center;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	color: #fff;
	border-radius: 60px;
	background-color: #000;
	transition: .2s;
}

ul.account_official li a:hover {
	background-color: #009FE8;
}

ul.account_official li a b:before {
    content: '';
	display: inline-block;
	vertical-align: middle;
	background-image: url("../images/icon/list-arrow-white.svg");
	background-size: cover;
	width: 10px;
	height: 18px;
	margin-right: 10px;
}

ul.account li figure {
    display: inline-block;
	max-width: 20px;
	vertical-align: 10%;
	margin-right: 5px;
}

ul.account {
    font-size: 0;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

ul.account li {
    display: inline-block;
	vertical-align: top;
	width: 100%;
	padding: 2%;
}

ul.account li a {
    display: block;
	padding: 10px;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 700;
	border-radius: 60px;
	border: solid 2px #000;
}

ul.account li figure {
    display: inline-block;
	max-width: 20px;
	vertical-align: 10%;
	margin-right: 5px;
}

ul.booklist li {
	font-size: 13px;
	font-weight: 400;
}

ul.booklist li b {
    display: block;
	font-size: 16px;
	font-weight: 700;
}

@media screen and (min-width: 1024px) {

    .newsbody {
        padding: 5% 10%;
    }
	
	.newsdetail header {
        text-align: center;
        margin-bottom: 4%;
    }

    .newsdetail header h1,
    .newsdetail header h2{
        font-size: 24px;
        line-height: 1.4;
        font-weight: 700;
        margin-bottom: 2%;
    }
	
	.newsbody h2 {
        font-size: 24px;
        line-height: 1.4;
        font-weight: 700;
        margin-bottom:10px;
    }
	
	.fixed_phrase h3 {
        margin-bottom: 3%;
    }
	
	.fixed_phrase .onebox.sns h3 {
        margin-bottom: 3%
    }
	
	#History dl dt {
        width: 8%;
        padding: 0 20px 0 0;
    }

    #History dl dd {
        width: 92%;
        text-align: justify;
    }
	
	#History dl dd section {
        padding: 0 0 20px 70px;
    }
	
	#History dl dd section span {
        padding: 2px 5px;
        font-size: 13px;
        width: 60px;
    }
	
	ul.account_official {
        text-align: center;
        padding: 50px 0 50px;
    }
	
	ul.account_official:empty {
	    padding: 0!important;
	}
	
	ul.account_official li {
        width: 33.333%;
		padding: 1%;
    }
	
	ul.account li {
        width: 48%;
        padding: 2%;
    }

    ul.booklist li b {
        display: inline-block;
    }

}

/* SNSアイコン ここから ───────────────────────────*/

.snsicon  {
    font-size: 0;
	line-height: 0;
	padding-bottom: 30px;
}

.snsicon ul  {
    width: 100%;
}

.snsicon ul li {
    display: inline-block;
	vertical-align: top;
	width: 23.5%;
	margin-right: 2%;
}

.snsicon ul li:last-of-type {
	margin-right: 0;
}

@media screen and (min-width: 1024px) {

    .snsicon ul  {
        width: 40%;
    }
	
	.snsicon ul li#sp {
	    display: none;
	}

}

/* 静的ページ ここから ───────────────────────────*/

.default {
    max-width: 1000px;
	width: 90%;
	margin: 0 auto 10%;
	padding: 4% 4%;
    background-color: #fff;
	box-shadow:1px 3px 4px 1px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

/* SERVICE,WORKS ここから ───────────────────────────*/

#ColumnTwo {
    font-size: 0;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 0px;
}

.column_left,
.column_right {
    position: relative;
    display: block;
}

.column_left {
    width: 92%;
	top: -60px;
    z-index: 2;
	margin: 0 auto;
}

.column_right {
    width: 100%;
	top: -100px;
    z-index: 1;
	min-height: 560px;
}

.column_inner {
    position: relative;
	width: 100%;
	height: 100%;
	z-index: 3;
	background-color: #FFFFFF;
}

.column_left header,
.column_left footer {
    position: absolute;
	background-color: #FFFFFF;
	width: 100%;
	height: 200px;
	z-index: 1;
	left: 0;
}

.column_left header {top: 0;}
.column_left footer {bottom: 0;}

.column_left header:before,
.column_left footer:before{
    content: '';
	position: absolute;
	filter: blur(5px);
	left: -5px;
    right: -5px;
	z-index: -1;
	will-change: transform;
}

.column_left header:before {
	background: linear-gradient(0deg, rgba(128,128,128,1) 0%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.2) 100%);
    top: -5px;
    bottom: 0;
}

.column_left footer:before {
	background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0) 54%);
    top: 0px;
    bottom: -5px;
}

/* 表題 ──────────────────*/
.mainname {
    font-family: rift-soft, sans-serif;
	line-height:1.4;
    font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align:center; 
	margin-bottom: 25px;
}

.mainname figure {
    display:inline-block;
	vertical-align: 7%;
	max-width: 12px;
	width: 100%;
	margin-right: 12px;
}

.mainname figure.double {
    max-width: 30px;
	vertical-align:7%;
}

.mainname span {
    font-family: 'M PLUS 1p', sans-serif;
	display:block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.2em;
}

.columnbody {
    padding: 5% 5% 5%;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8;
}

.columnbody h1,
.columnbody h2{
    font-family: rift-soft, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
	text-align: center;
}

.columnbody h1.japan,
.columnbody h2.japan {
    font-family: 'M PLUS 1p', sans-serif;
	font-size: 23px;
	line-height: 1.4;
	letter-spacing: 0;
	margin-bottom: 20px;
	text-align: justify;
	word-break: break-all;
}

.columnbody p {
	text-align: justify;
}

.entrybody {
    padding: 10px 0;
}

.gaiyo {
    padding: 20px 0 10px;
}

.effectbox {
    padding: 20px 0 20px;
}

.subtitle {
    padding: 15px 0;
}

.subject,
.contentsWork,
.servicebox{
    font-size: 13px;
	padding: 5px 0;
}

.pointWork01,
.pointWork02,
.pointWork03,
.pointWork04,
.pointWork05{
    font-size: 13px;
    font-weight: 700!important;
	padding: 5px 0 10px;
}

.resultbox {
    font-size: 13px;
    font-weight: 700!important;
	padding: 5px 0 10px;
}

.c_rightinnner {
    padding: 70px 0 0 0;
	width: 100%;
	margin: 0;
}

.c_rightinnner:before {
    content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 560px;
	max-height: 560px;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	z-index: -1;
}

.c_rightinnner.green:before {background-image: url("../images/img/common/circle-green.svg");}
.c_rightinnner.yellow:before {background-image: url("../images/img/common/circle-yellow.svg");}

.c_rightinnner header {
    text-align: center;
	padding: 0 0 0 0;
}

.c_rightinnner h2 {
    font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.c_rightinnner h2 span {
    font-family: rift-soft, sans-serif;
	font-size: 28px;
	font-weight: 700;
	display: block;
	letter-spacing: 0.1em;
}

ul#relatednews {
    width: 100%;
    text-align: center;
	position: absolute;
	max-width: 400px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

ul#relatednews li {
    padding: 30px;
	position: relative;
	height: 400px;
	margin: 0 2%;
}

ul#relatednews li figure {
    position: absolute;
	width: 96%;
	top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
	text-align: center;
}

ul#relatednews li img  {box-shadow:2px 3px 6px 3px rgba(0, 0, 0, 0.1);}

ul#relatednews li img  {
    max-height: 170px;
    display: block;
    margin: 0 auto;
	border-radius: 4px;
}
	
ul#relatednews li p {
    position: absolute;
	text-align: center;
	width: 120%;
	bottom: 0;
	left: -10%;
    font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	z-index: 100;
}

ul#relatednews li p time {
    display: block;
	margin-bottom: 10px;
	font-weight: 700;
}

.buttontype {
    position: absolute;
	width: 100%;
	text-align: center;
	bottom: -30px;
	left: 0;
}

.buttontype a {
    display: block;
	width: 90%;
	font-size: 15px;
	font-weight: 700;
	max-width: 240px;
	margin: 0 auto;
	padding: 6px 10px;
	border: solid 2px #000;
	border-radius: 80px;
	background-color: #fff;
}

.buttontype.green a {
	border: solid 2px #009844;
	color: #009844;
}

.buttontype.yellow a {
	border: solid 2px #FFD429;
	color: #FFD429;
}

#DataInfo {
    position: relative;
    border: solid 2px #000;
	margin-top: 40px;
	width: 100%;
}

#DataInfo h3 {
	width: 100%;
	text-align: center;
    font-size: 18px;
	position: relative;
	margin: -1em 0 0;
}

#DataInfo h3 span {
    display: inline-block;
	background-color: #fff;
	padding: 0 20px;
}

.datainner {
    padding: 10px;
}

#DataInfo dl {
    display: table;
	width: 100%;
	padding: 15px 0;
	border-bottom: dashed 1px #000;
}

#DataInfo dl:last-of-type {
	border-bottom: none;
}

#DataInfo dl dt,
#DataInfo dl dd {
    display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.4;
	padding: 0 0 0 15px;
}

#DataInfo dl dt {
    width: 30%;
}

#DataInfo dl dd {
    width: 70%;
}

#DataInfo dl dd {
    word-break: break-all;
}

@media screen and (min-width: 1024px) {

    #ColumnTwo {
        width: 92%;
		padding: 0 0 60px;
    }

    .column_left {
        width: 60%;
		float: left;
        top: -100px;
    }

    .column_right {
        width: 40%;
		float: right;
		min-height: 500px;
		top: 60px;
    }
	
	.columnbody h1.japan,
	.columnbody h2.japan {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: 0;
        margin-bottom: 20px;
    }
	
	.c_rightinnner {
        padding: 40px 0 0 0;
        width: 100%;
        margin: 0 0 0 4%;
    }
	
	.c_rightinnner:before {
        top: 0;
        bottom: 0;
        left: -4%;
        right: 0;
        margin: auto;
        max-width: 560px;
        max-height: 560px;
        width: 120%;
        height: 120%;
    }
	
	.c_rightinnner h2 {
        font-size: 11px;
    }
	
	.c_rightinnner h2 span {
        font-size: 20px;
    }
	
	ul#relatednews {
        left: 54%;
    }
	
	ul#relatednews li p {
        font-size: 13px;
    }
	
	ul#relatednews li img  {
	    max-height: 170px;
		display: block;
		margin: 0 auto;
	}
	
	.buttontype {
        bottom: -40px;
        left: 4%;
    }
	
	.columnbody h2 {
	    font-size: 24px;
	    text-align: left;
		margin-bottom: 10px;
	}
	
	.mainname {
        font-size: 24px;
        text-align:left; 
        margin-bottom: 25px;
    }

    .mainname figure {
        vertical-align: 7%;
        max-width: 15px;
        width: 100%;
        margin-right: 15px;
    }

    .mainname span {
	    display: inline-block;
        vertical-align: 20%;
		margin-top: 0;
        margin-left: 15px;
        font-size: 10px;
    }
	
	.datainner {
        padding: 20px;
    }
	
	#DataInfo dl dt,
    #DataInfo dl dd {
        padding: 0 0 0 20px;
    }

}


.default section {
	padding: 12% 0 0;
}

.default header {
    text-align: center;
	margin-bottom: 2%;
}

.default header h1,
.default header h2{
    font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 2%;
}

.default .onebox {
    padding: 2% 0 2%;
}

.default .onebox h3 {
    font-size: 14px;
	font-weight: 800;
}

.default .onebox p {
    font-size: 14px;
	line-height: 1.6;
}

.default .onebox ul {}
.default .onebox ul li {
    padding: 0;
	margin: 0;
	line-height: 1.6;
}

ol.plain-text {
    padding: 4% 0 0;
}

ol.plain-text ol {
    padding: 2% 0;
}

ol.plain-text li {
    position: relative;
    font-size: 13px;
	line-height: 1.6;
	text-align: justify;
	padding: 0 0 0 22px;
}

ol.plain-text li var {
    display: inline-block;
	position: absolute;
	left: 0;
}

@media screen and (min-width: 1024px) {

    ol.plain-text {
        padding: 1% 0 0;
    }

}

.contactbtn {
    text-align: center;
	padding: 30px 0 20px;
}

.modal,
.modal_download{
	position:fixed;
	font-size: 0;
    width: 100%;
    height:100%;
	top: 30px;
	left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: #fff;
	visibility: hidden;
	opacity: 0;
	z-index: 100000!important;
	transition: all .3s;
}
.modal.active,
.modal_download.active{
	top: 0;
	left: 0;
	opacity: 1;
	visibility: visible;
}

.mclose_contact,
.mclose_download{
    padding: 0 0 60px;
}

/* ハンバーガー ─────────*/
.mclose_contact .modal__toggle,
.mclose_download .modal__toggle {
    display: block;
    position:fixed; 
    top:10px;
    right:15px;
    z-index:5;
    padding: 0;
    background-color: #fff;
    width: 40px;
    height: 40px;
	outline: none;
	border: none;
	border: solid 1px #000;
	border-radius: 100%;
	cursor: pointer;
	touch-action: manipulation;
}

.mclose_contact.active,
.mclose_download.active{opacity: 1;visibility: visible;}

.mclose_contact.active .modal__toggle__bar,
.mclose_download.active .modal__toggle__bar {
    margin: 0;
    position: absolute;
    top: 17px;
    left: 10px;
    height: 4px;
    width: 18px;
}
.mclose_contact.active .modal__toggle__bar:nth-child(1),
.mclose_download.active .modal__toggle__bar:nth-child(1) {transform: rotate(45deg);}
.mclose_contact.active .modal__toggle__bar:nth-child(2),
.mclose_download.active .modal__toggle__bar:nth-child(2) {opacity: 0;}
.mclose_contact.active .modal__toggle__bar:nth-child(3),
.mclose_download.active .modal__toggle__bar:nth-child(3) {transform: rotate(-45deg);}

#ModalContents {
    position: relative;
    max-width: 100%;
	width: 94%;
	margin: 0 auto;
	padding: 60px 0 30px;
	font-size: 0;
}

#ModalContents header {
    margin-bottom: 10px;
}

#ModalContents header h2 {
    text-align: center;
}

#ModalContents header h2 b {
    font-family: rift-soft, sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

#ModalContents header h2 span {
    font-family: 'M PLUS 1p', sans-serif;
	font-size: 15px;
	margin-left: 20px;
}

#ModalContents header h2 b,
#ModalContents header h2 span {
    display: inline-block;
	vertical-align: middle;
}

#ModalContents header h2 span img {
	width: 13px;
	vertical-align: middle;
	margin-right: 6px;
}

#ModalContents label {
    position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	margin-right: 0;
	cursor: pointer;
	border-bottom: solid 1px #000;
	-webkit-tap-highlight-color:transparent;
}

#ModalContents label:hover {
   
}

#ModalContents label:nth-child(4n){
	margin-right: 0;
}

#ModalContents dl.pdf {
    width: 100%;
	font-size: 0;
	line-height: 0;
	padding: 20px 0 20px;
}

#ModalContents dl.pdf dt,
#ModalContents dl.pdf dd {
    display: inline-block;
	vertical-align: top;
    margin: 0;
	padding: 0;
}

#ModalContents dl.pdf dt {
    width: 42%;
	padding: 0 0 0 6%;
}

#ModalContents dl.pdf dd {
    width: 58%;
	padding: 0 2% 0 3%;
}

#ModalContents dl.pdf dd h3 {
    text-align: left;
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 10px;
}

#ModalContents dl.pdf dd p {
    font-size: 14px;
	line-height: 1.4;
	text-align: justify;
	margin-bottom: 10px;
}

#ModalContents dl.pdf dd div {
    text-align: center;
}
#ModalContents label::selection,
#ModalContents dl.pdf dt::selection,
#ModalContents dl.pdf dd::selection,
#ModalContents dl.pdf dt img::selection,
#ModalContents dl.pdf dd h3::selection,
#ModalContents dl.pdf dd p::selection {
    outline:none;
}

input[type=checkbox] {
  display: none;
}

.checkbox {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
}

.checkbox:hover {
}

.checkbox:hover:after {
    border-color: #666;
}

.checkbox:before {
	position: absolute;
	top: 50%;
	left: 4%;
	margin-top: -9px;
	margin-left: -5px;
	display: block;
	width: 10px;
	height: 18px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 3;
}

.checkbox:after {
	position: absolute;
	top: 50%;
	left: 4%;
	margin-top: -15px;
	margin-left: -15px;
	display: block;
	width: 30px;
	height: 30px;
	background-color: #D9D9D9;
	content: '';
	z-index: 1;
}

input[type=checkbox]:checked + .checkbox:after {
    background-color: #009DE4;
}

input[type=checkbox]:checked + .checkbox:before {
   opacity: 1;
}

.submitterbox {
    padding: 30px 0 0;
}

.submitterbox.center {
    padding: 30px 0 30px;
	text-align: center;
}

.submitterbox.back {
    padding: 10% 0 0;
}

#TopBlock02 .submitterbox.center {
    padding: 60px 0 30px;
}

#TopBlock03 .submitterbox.center {
	padding-top: calc(5% + 30px) ;
}

p.tojiru {
	margin: 0 auto;
	width: 60px;
    text-align: center;
	padding: 0 0 0;
	color: #000;
}

p.tojiru span {
    display: inline-block;
	width: 100%;
	cursor: pointer;
}

@media screen and (min-width: 1024px) {

    /* ハンバーガー ─────────*/
    .mclose_contact .modal__toggle,
    .mclose_download .modal__toggle {
        top:10px;
        right:30px;
		width: 44px;
		height: 44px;
    }
	
	.mclose_contact.active .modal__toggle__bar,
    .mclose_download.active .modal__toggle__bar {
        top: 20px;
        left: 12px;
        height: 4px;
        width: 18px;
    }
	
	#TopBlock02 .submitterbox.center {
        padding: 100px 0 30px;
    }

    #TopBlock03 .submitterbox.center {
        padding-top: calc(10% + 30px) ;
    }

    #ModalContents {
        width: 86%;
        padding: 5% 0;
    }
	
	#ModalContents.contact {
	    max-width: 1040px;
	}
	
	#ModalContents.contact header {
	    padding-bottom:30px;
		width: 100%;
	}
	
	#ModalContents header h2 b {
        font-size: 33px;
        letter-spacing: 0.3em;
    }

    #ModalContents header h2 span {
        font-size: 15px;
        margin-left: 3%;
		letter-spacing: 0.1em;
    }
	
	#ModalContents header h2 span img {
        width: 16px;
        margin-right: 8px;
    }

    #ModalContents label {
        width: 25%;
    }
	
	#ModalContents label {
        border-radius: 20px;
        border-bottom: none;
    }
	
	#ModalContents label:hover {
        background-color: #D9D9D9;
    }
	
	#ModalContents dl.pdf {
        padding: 60px 0 50px;
    }
	
	#ModalContents dl.pdf dt {
        width: 100%;
		padding: 0 5%;;
    }

    #ModalContents dl.pdf dd {
        width: 100%;
		padding: 10px 10% 20px;
    }
	
	#ModalContents dl.pdf dd h3 {
        text-align: center;
        font-size: 17px;
        margin-bottom: 20px;
    }
	
	.checkbox:before {
        top: auto;
		bottom: 38px;
        left: 50%;
        margin-left: -5px;
    }

    .checkbox:after {
        top: auto;
		bottom: 30px;
        left: 50%;
        margin-left: -15px;
    }
	
	

}

#ContactFoot {
    position: relative;
	top:-30px;
    font-family: 'rift-soft', 'M PLUS 1p', sans-serif;
	display: table;
	width: 90%;
	max-width: 760px;
	box-shadow:1px 3px 4px 1px rgba(0, 0, 0, 0.1);
	border-radius: 100px;
	margin: 50px auto 0;
	background-color: #fff;
}

#ContactFoot .inner {
    display: table-cell;
	vertical-align: middle;
	padding: 10px;
	text-align: center;
	line-height: 1.2;
}

#ContactFoot h4,
#ContactFoot var,
#ContactFoot time {
    display: inline-block;
	vertical-align: middle;
}

#ContactFoot h4 span {
    display:none;
}

#ContactFoot time i {
    display: inline-block;
	vertical-align: middle;
}

#ContactFoot h4 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

#ContactFoot var a {
    font-size: 26px;
	font-weight: 700;
	vertical-align: middle;
	letter-spacing: 0.1em;
}

#ContactFoot var {
	margin: 0 0 0 3%;
}

#ContactFoot var i {
    font-size: 13px;
	display: inline-block;
	vertical-align: -13%;
}

#ContactFoot time {
    font-family:'M PLUS 1p', sans-serif;
	font-size: 12px;
	text-align: left;
    line-height: 1.4;
}

#footerblocks {
	width: 100%;
	text-align: center;
	padding: 0 0 4%;
	background-color: #FFFFFF;
}

.pankuzu {}

.pankuzu li {
    font-family: 'rift-soft', 'M PLUS 1p', sans-serif;
	display: inline-block;
	vertical-align: middle; 
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.pankuzu li img {width: auto;height: 13px;vertical-align: -5%;}

.pankuzu li a:after {
    content: '';
	background-image: url("../images/icon/icon-arrow.svg");
	background-size: 5px 10px;
	width: 5px;
	height: 10px;
	display: inline-block;
	margin: 0 7px 0 12px;
}

.pankuzu li:last-of-type {
    max-width: 200px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pankuzu { padding: 4% 0 0;}
#ContactFoot + .pankuzu { padding: 0 0 0;}

/*======================================
 
	PC
 
=======================================*/

@media screen and (min-width: 1024px) {

    #Contents {
		width: 100%;
		padding: 0;
        margin: 0;
		position: relative;
    }
	
	#Contents.wide {
		width: 100%;
		float: none;
	}
	
	#Main {
      width: 100%;
      height: 100%;
    }
	
	
	#modal01.modal.js-modal {
	    display: block!important;
	}
	
	#footerblocks {
        padding: 0 0 3%;
    }
	
	#ContactFoot {
		top:-50px;
		padding: 15px 20px;
    }
	
	#ContactFoot h4 {
	    font-size: 14px;
		letter-spacing: 0.2em;
	}
	
	#ContactFoot h4 span {
		font-size: 12px;
		font-weight: 400;
	}
	
	#ContactFoot h4 span,
    #ContactFoot time i {
        display: inline-block;
    }
	
	#ContactFoot var {
        margin: 0 3% 0 4%;
    }
	
	#ContactFoot time b {display:inline-block;}
	
	.pankuzu { padding: 3% 0 0;}
	#ContactFoot + .pankuzu { padding: 0 0 0;}
	
	.pankuzu li:last-of-type {
        max-width: 400px;
    }

}


@media screen and (min-width: 1200px) {

    #Contents {
		width: 100%;
    }
}

/* ==================================================================================================================================
    NEWS
=================================================================*/

#CategoryBody {
	position: relative;
	padding: 20px 0 0;
}

.closebutton {
    position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	height: 50px;
	background-color: #fff;
	z-index: 102;
	visibility: hidden;
	opacity: 0;
	border-radius: 100%;
	border: none;
	cursor: pointer;
	text-indent: -9999px;
}

.closebutton.active {
    top: 50px;
	visibility: visible;
	opacity: 1;
	background-image: url("../images/share/close.svg");
	background-size: cover;
}

#category-search {
    position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px 0 0;
	z-index: 101;
}

#category-search figure {
    width: 100%;
	max-width: 240px;
    margin: 0 auto;
}

#category-search img.button {
    display: block;
	border-radius: 60px;
	border: solid 4px #000;
	padding: 5px 20px;
	cursor: pointer;
	background-color: #EEEEEE;
	position: relative;
	z-index: 102;
}

#category-search img.button:hover {
    background-color: #fff;
}

#category-search img.button.disappear {
    display: none;
}

.modalbase{
    display:none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.layer {
    position: absolute;
	top:0;bottom:0;left:0;right:0;
	width: 0;
    opacity: 0;
    visibility: hidden;
    margin: auto;
    z-index: 100;
}

.layer.show {
    opacity: 1;
    visibility: visible;
	width: 100%;
}

.layer:before {
    position: absolute;
    top: -180px;
    left: 0;
    content: '';
    display:block;
    width: 100%;
    height: 200px;
    background-color: #EEEEEE;
}

.layerinner {
    position: relative;
    font-size: 0;
    margin: auto;
    padding: 30% 3% 0;
    width: 80%;
	max-width: 1000px;
    overflow-y: auto;
    background-color: rgba(238, 238, 238, 1);
}

.layerinner section {
    padding: 0 0 30px;
}

.layerinner h3 {
    font-size: 16px;
	line-height: 1.4;
	color: #000;
	margin-bottom: 10px;
}

.layerinner ul li {
    display: inline-block;
	vertical-align: top;
	width: 49%;
	margin-right: 2%;
	margin-bottom: 2%;
	text-align: center;
	padding: 0;
	border-radius: 10px;
	background-color: #686868;
	overflow: hidden;
}

.layerinner ul li:nth-child(2n){
	margin-right: 0;
}

.layerinner ul li a {color: #fff;}

.layerinner ul li figure {
    position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	z-index: 2;
	text-align: center;
	*zoom:1;
}

.layerinner ul li figure:before {
    content:'';
    display: block;
    padding-top: 60%; /* 高さを幅の75%に固定 */
}

.layerinner ul li figure:after {
    content:'';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
}

.layerinner ul li:hover figure:after {
	background-color: rgba(0,0,0,0);
}

.layerinner ul li figure span {
    display: inline-block;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	position: absolute;
	z-index: 3;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.pagestyle-news {
    margin: 0 auto;
	padding: 0 0 30px;
	width: 100%;
	position: relative;
}

#search-results {

}

#search-results header {
    text-align: center;
	margin-bottom: 4%;
}

#search-results header h1,
#search-results header h2{
    font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 2%;
}

.search_section {
    font-size: 0;
	line-height: 0;
	text-align: center;
}

.search_section h3,
.searchbox {
    display: inline-block;
	vertical-align: top;
	padding: 0;
}

.search_section h3 {
    font-size: 13px;
	line-height: 1.4;
	width: 100%;
	text-align: left;
	padding: 0;
}

.searchbox {
	width: 100%;
}

.searchbox input {
    display: inline-block;
	vertical-align: top;
}

.searchbox input[type=text]{
    -webkit-appearance: none;
    border-radius: 5px;
	background-color: #FFFFFF;
	height: 38px;
	width: 77%;
	margin: 0!important;
	border: none;
	padding: 0 10px;
}

.searchbox input[type=submit]{
    font-size: 14px;
	font-weight: 700;
	-webkit-appearance: none;
    border-radius: 20px;
	height: 38px;
	width: 20%;
	margin: 0 0 0 3%;
	border: solid 1px #000;
}

@media screen and (min-width: 1024px) {

    .layer:before {
        top: -150px;
    }

    .closebutton.active {
        top: 20px;
        visibility: visible;
        opacity: 1;
    }

    .search_section h3 {
        font-size: 13px;
        height: 38px;
        line-height: 38px;
        width: 20%;
        text-align: right;
        padding: 0 10px 0 0;
		white-space: nowrap;
    }

    .searchbox {
        width: 50%;
    }

    .searchbox input[type=text]{
        height: 38px;
        width: 75%;
    }

    .searchbox input[type=submit]{
        height: 38px;
        width: 15%;
        margin: 0 0 0 3%;
		padding: 0 10px;
		letter-spacing: 0.1em;
		cursor: pointer;
    }

}

.newslistblocks {
    width: 100%;
}

.newslistinner {
    width: 92%;
	font-size: 0; 
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0 0;
}

dl.news {
    display: inline-block;
	vertical-align: top;
	width: 100%;
    margin-bottom: 7%;
    margin-right: 0%;
	border-radius: 14px;
	background-color: #FFFFFF;
	box-shadow:1px 3px 4px 1px rgba(0, 0, 0, 0.2);
	will-change: transform;
	overflow: hidden;
	padding: 0 0 10px;
}

dl.news dt {
    display: table;
    text-align: center;
	width: 100%;
	height: 100%;
}

dl.news dt a {
    display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

dl.news dt figure {}

dl.news dt figure img {
    max-height: auto;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
}

dl.news dt figure:hover img{
  -moz-transform: scale(1.3,1.3);
  -webkit-transform: scale(1.3,1.3);
  -o-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);
}

dl.news dd {
    padding: 5% 5% 2%;
}

dl.news dd time {
    display: block;
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 10px;
	letter-spacing: 0.1em;
}

dl.news dd h2 {
	font-size: 14px;
	line-height: 1.4;
	text-align: justify;
}

dl.news:nth-child(3n) {
    margin-right: 0;
}

ul.tag {
    text-align: center;
	padding: 20px 0 0;
}

ul.tag li {
    display: inline-block;
	vertical-align: middle;
	max-width: 80%;
	margin-bottom: 5px;
}

ul.tag li a {
    display: block;
    background-color: #000000;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	border-radius: 20px;
	padding: 3px 15px;
	margin: 0 4px;
	white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
	transition: .2s; /* 縺ｪ繧√ｉ縺句､牙喧 */
}

ul.tag li a:hover {
    background-color: #009FE8;
}

@media screen and (min-width: 750px) {

    #CategoryBody {
        position: relative;
		padding: 0;
    }

    #category-search {
		max-width: 240px;
		width: 100%;
		margin: 0 auto;
    }
	
	p.closebutton.active + #category-search {
	    max-width: 100%!important;
	}
	
	.layerinner {
        padding: 7% 3% 0;
    }
	
	.layerinner ul li {
        width: 24%;
		margin-right: 1.333333%;
    }
	
	.layerinner ul li:nth-child(2n){
	    margin-right: 1.333333%;
    }

    .layerinner ul li:nth-child(4n){
        margin-right: 0;
    }
	
	.newslistinner {
		width: 82%;
		padding: 40px 0 0;
    }

    dl.news {
        width: 31.4%;
        margin-bottom: 2.9%;
        margin-right: 2.9%;
    }
	
	dl.news dt figure img {
        max-height: 212px;
    }
	
	dl.news dt figure img {
        -moz-transform: scale(1.05,1.05);
        -webkit-transform: scale(1.05,1.05);
        -o-transform: scale(1.05,1.05);
        -ms-transform: scale(1.05,1.05);
    }

}

/* ==================================================================================================================================
    BRAND
=================================================================*/

.pagestyle-brand {
    margin: 0 auto;
	padding: 30px 0 8%;
	width: 100%;
}

.pagestyle-brand header {
    text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

.pagestyle-brand header h2 {
    max-width: 150px;
	margin: 0 auto;
}

/* ==================================================================================================================================
    SERVICE WORKS
=================================================================*/
.pagestyle-common {
    margin: 0 auto;
	padding: 30px 0 0;
	width: 100%;
}

.pagestyle-common.company {
	padding: 0 0 0;
}

.pagestyle-common header {
    text-align: center;
	margin: 0 auto;
	padding: 5% 0 10%;
	width: 86%;
	max-width: 1200px;
}

.pagestyle-common header p a {
    text-decoration: underline;
	color: #E3007F;
}

.pagestyle-common header h2 {
    font-family: rift-soft, sans-serif;
	line-height:1.4;
    font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
	text-align:center; 
}

.pagestyle-common header h2 figure {
    display:inline-block;
	vertical-align: top;
	max-width: 20px;
	width: 100%;
	margin-right: 20px;
}

.pagestyle-common header h2 figure.double {
    max-width: 40px;
	vertical-align:10%;
}

.pagestyle-common header h2 span {
    font-family: 'M PLUS 1p', sans-serif;
	display: block;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 700;
	letter-spacing: 0em;
	margin-top: 20px;
}

.pagestyle-common header p {
    text-align: left;
	font-size: 16px;
	line-height: 1.8;
}

.listblocks {
    width: 100%;
}

.listblocks.green {
    background-color: #E5F5EC;
	padding: 60px 0 50px;
}

.listblocks.pink {
    background-color: #FCE5F2;
	padding: 60px 0 50px;
}

.listblocks.yellow {
    background-color: #FFFBE5;
	padding: 60px 0 50px;
}

.listblocks h3 {
    font-family: 'rift-soft', 'M PLUS 1p', sans-serif;
    text-align: center;
	font-size: 20px;
	line-height: 1.6;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.listblocks h3 span {
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	font-weight: 400;
}

.listblocks h3 span:before {
    content: '-';
	display: inline-block;
	margin-right: 5px;
}

.listinner {
    width: 92%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 0 0;
}

ul.list-square {
    font-size: 0;
}

ul.list-square li {
    position: relative;
    display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 48%;
	margin-bottom: 4%;
	margin-right: 4%;
	padding: 2%;
}

ul.list-square li:before {
    content:'';
    display: block;
    padding-top: 100%; /* 高さを幅の75%に固定 */
}

ul.list-square li a section {
    position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	border-radius: 14px;
	box-shadow:1px 3px 4px 1px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	will-change: transform;
	-webkit-transition: all .3s ease;
    transition: all .3s ease;
}

ul.list-square li:hover a section {
	width: 70%;
	height: 70%;
}

ul.list-square li a figure {
    position: absolute;
	z-index: 3;
	width: 90%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

ul.list-square li a h2 {
    position: absolute;
    opacity: 0;
	visibility: hidden;
	width: 100%;
	bottom: 0;
	left: 0;
	text-align: center;
	-webkit-transition: all .3s ease;
    transition: all .3s ease;
}

ul.list-square li:hover a h2 {
    opacity: 1;
	visibility: visible;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 700;
	color: #000;
}

ul.list-square li a img {
    width: 60%;
	-webkit-transition: all .3s ease;
    transition: all .3s ease;
}

ul.list-square.gray li a section {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

ul.list-square.gray li:hover a section {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
}

ul.list-square li:hover a img {
	width: 80%;
}

ul.list-square li:nth-child(2n) {
    margin-right: 0;
}

ul.list-square li.cover img {
    width: 100%;
}

/*====================================== 
	PC > 1024px
=======================================*/

@media screen and (min-width: 1024px) {

    .pagestyle-common.company {
        padding: 30px 0 0;
    }

    .pagestyle-common header {
        display: table;
		width: 80%;
    }

    .pagestyle-common header h2 {
        font-size: 36px;
		text-align: left;
    }

    .pagestyle-common header h2 figure {
        max-width: 26px;
        width: 100%;
        margin-right: 30px;
    }
	
	.pagestyle-common header h2 figure.double {
	    max-width: 54px;
	}

    .pagestyle-common header h2 span {
        display: inline-block;
        font-size: 13px;
        margin-top: 0;
        vertical-align: middle;
		margin-left: 8%;
    }

    .pagestyle-common header h2,
	.pagestyle-common header p {
	    display: table-cell;
		vertical-align: middle;
	}
	
	.pagestyle-common header h2 {
		width: 40%;
    }

    .pagestyle-common header p {
		width: 60%;
		padding-left: 5%;
    }
	
	ul.list-square li {
        width: 30.8%;
        margin-bottom: 3.8%;
        margin-right: 3.8%;
    }
	
	ul.list-square li:nth-child(2n) {
        margin-right: 3.8%;
    }

    ul.list-square li:nth-child(3n) {
        margin-right: 0;
    }

}


/*
===== お問い合わせ ==========================================
*/

.inquiryleft {
    position: relative;
    padding: 10px 0 10px;
	width: 100%;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
}

.inquiryleft p {
    padding: 0 0 20px;
	line-height: 1.6;
}

.inquiryleft span {
    display: block;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	text-align: justify;
}

.mailblock h4 {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	margin-bottom: 10px;
}

.inquiryleft .mailblock p {
    padding: 0 0 0;
}

.mailblock {
    padding: 0 0 20px;
}

#Inquiry {
    padding: 0 0;
	width: 100%;
	margin: 0 auto;
}

.inquirycontainer {
    padding: 10px 2% 40px;
}

#Inquiry header {
    text-align:center; 
}

#Inquiry header h2 {
    font-size: 20px;
    color: #000;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 5px;
}

#Inquiry header p {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 700;
	color: #4188F0;
}

p.caution {
    text-align: center;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 400;
	color: #FF0000;
}

.inquiry-inner {
    padding: 0 0 0;
}

.inquiry-inner dl {
    display: block;
	position: relative;
	margin: 0;
	padding: 13px 0;
	margin: 15px 0;
	border: 1px solid #000;
	border-radius: 5px;
}

.inquiry-inner dl:focus-within {
    border: solid 1px #4591FF;
}

.inquiry-inner dl:required,
.inquiry-inner dl:required {
       border: solid 3px #FF0000!important; 
}

.inquiry-inner dl.first { }
.inquiry-inner dl.last { }

.inquiry-inner dl:before {
	content:none;
}

.inquiry-inner dt,
.inquiry-inner dd {
    display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

.inquiry-inner dl.textarea {
	padding: 10px 0 0;
}

.inquiry-inner dl.textarea dt,
.inquiry-inner dl.textarea dd {
    display: block;
	width: 100%;
}

.inquiry-inner dt {
	margin: 0;
	padding: 0 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	color: #000;
}

.inquiry-inner dt {
    width: 18%;
}

.inquiry-inner dd {
    width: 82%;
	padding: 0 5px 0 0;
}

.inquiry-inner dl:nth-child(2) dt {width: 30%;}
.inquiry-inner dl:nth-child(2) dd {width: 70%;}

.inquiry-inner dl:nth-child(4) dt {width: 29%;}
.inquiry-inner dl:nth-child(4) dd {width: 71%;}

.inquiry-inner dd select {
    display: inline-block;
}

.inquiry-inner dt span {
	color: #FF0004;
}

span.error_blank,
span.error_format{
    position: absolute;
	top: 0;
	left: 10px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 500;
	width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 0 0;
}

.inquiry-inner dl:nth-child(4) span.error_blank {

}


#error {
    padding: 30px 0;
}

#error h3 {
    text-align: center;
	font-size: 18px;
	line-height: 1.4;
	color: #FF6666;
	margin-bottom: 20px;
}

#error p {
    text-align: center;
	font-size: 15px;
	line-height: 1.8;
	color: #FF6666;
}

input[type=text],
input[type=tel] ,
input[type=email],
textarea{
    width: 100%;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #333;
	border: none;
	height : 30px;
	padding :0 0;
	border-radius: 0;
	background-color: transparent;
}

select#contactSelect{
    width: 96%;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #333;
	border: none;
	height : 30px;
	padding :0 10px;
	border-radius: 0;
	background-color: transparent;
	
	-webkit-appearance: button;
    appearance: button;
}

/* safariで自動入力欄の色（黄色）を変更する */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input::placeholder,
textarea::placeholder{
    color: #898989;
    font-size: 17px;
    font-weight: 700;
    opacity: 0.5;
}

/* Webkit */
::-webkit-input-placeholder {
    opacity: 0.7;
}

::-moz-placeholder {
    /* Firefox 19 以降のデフォルトでは */
    /* color ではなく opacity で色合いを調整しているため */
    /* 文字色を指定する場合、opacity を 1 にする必要がある */
    opacity: 0.7;
}

::-ms-input-placeholder {
    opacity: 0.7;
}

textarea{
	width : 100%;
	max-width : 100%;
	height : 100px;
	padding : 10px 15px 10px;
	resize : vertical;
	-webkit-appearance : none;
	border-radius: 0px;
}

/* -- for JavaScript -------------------------------------------------------------------------------- */

form#mail_form dl dt span {
	font-size: 14px;
	line-height: 1.4;
}

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{
	display : none;
	float : left;
	font-weight : bold;
	color : #ffffff;
	padding : 3px 5px;
	border-radius : 3px;
}

form#mail_form dl dt span.required{
	background : rgba( 255, 50, 50, 0 );
}

form#mail_form dl dt span.optional{
	background : rgba( 255, 255, 255, 0 );
}

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match{
	display : block;
	color : #ff0000;
}

form#mail_form select{
	background-color: #FFFFFF;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

span.loading{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
}

@-webkit-keyframes load-circle{
	0%{
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100%{
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle{
	0%{
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100%{
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

div#confirm_field{
	width : 100%;
	margin : 0px auto;
	padding : 10px 0;
	background : #fff;
}

div#confirm_field{
	display : none;
}

div#confirm_field h2 {
    width: 100%;
    position: static;
	text-align: center;
	margin-bottom: 30px;
}

div#confirm_field h2{
	font-size : 15px;
	line-height: 1.4em;
	font-weight: 400;
	color: #000;
}

div#confirm_field h2 span {
	display: block;
	font-size : 13px;
	line-height: 1.4em;
	font-weight: 100;
	padding: 10px 0 10px 0;
}

div#confirm_field dl{
	width : 100%;
	margin : 0 auto;
	overflow : hidden;
}

div#confirm_field dl dt:first-of-type,
div#confirm_field dl dd:first-of-type {border-top :none!important;}

div#confirm_field dl dt{
	clear : both;
	width : 100%;
	padding : 0 0 5px;
	text-align : left;
	color: #000;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	color: #FF0004;
}

div#confirm_field dl dd{
	width : 100%;
	padding : 0 0 20px 10px;
	color: #000;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 700;
}

input#company:focus { }

.thanks {
    padding: 30% 5% 20%;
	max-width: 1140px;
	margin: 0 auto;
	text-align: center;
}

.thanks h2 {
    font-size: 18px;
	line-height: 1.8;
	margin: 0 0 7%;
}

.thanks h2 span {
    display: block;
}

.thanks h2 span.second {
    display: block;
}

.thanks p {
    font-size: 14px;
	line-height: 2;
    color: #000000;
	text-align: justify;
}

.thanks p br {
	display: none;
}

.thanks h3 {
    font-size: 16px;
	line-height: 1.8;
	margin: 7% 0 0;
	letter-spacing: 0.1em;
}

.thanks h3 a {color: #000;}
/*====================================== 
	PC > 1024px
=======================================*/
@media screen and (min-width: 1024px) {

    .inquiryleft {
	    position: absolute;
		top: 0;
		left: -115%;
		padding: 0;
		width: 90%;
    }
	
	.inquiryleft p {
        padding: 0 0 60px;
    }
	
	div#confirm_field h2 {
	    width: 100%;
        position: absolute;
		top: 30%;
        left: -115%;
		text-align: left;
		margin-bottom: 0;
    }
	
	.mailblock {
        padding: 0 0 60px;
    }
	
	.inquiryleft .mailblock p {
        padding: 0 0 3px;
    }

    #Inquiry {
	    position: relative;
        float: right;
		width: 46%;
    }
	
	.inquiry-inner dl {
        padding: 5px 0px;
        margin: 0px 0 15px;
        border: 1px solid #000;
        border-radius: 5px;
    }
	
	.inquiry-inner dt {
        width: 18%;
    }

    .inquiry-inner dd {
        width: 82%;
        padding: 0 5px 0 0;
    }

    .thanks {
        padding: 10% 10% 10%;
    }
	
	.thanks h2 {
        font-size: 22px;
    }
	
	.thanks h2 span.second {
        display: inline;
    }
	
	.thanks p {
	    text-align: center;
        font-size: 16px;
    }
	
	.thanks p br {
        display: inline;
    }
	
	.thanks h3 {
        font-size: 24px;
    }
	
	input[type=text],
    input[type=tel] ,
    input[type=email]{
        height : 40px;
    }

    select#contactSelect{
        height : 40px;
    }

}

/* ==================================================================================================================================
         Footer
=================================================================*/

#footer {
	width: 100%;
	padding: 40px 20px 100px;
	font-size: 12px;
	text-align: center;
	background-color: #000000;
	clear: both;
}

#footer ul.firstnavi {
    font-size: 0;
    margin: 0;
	padding: 5% 0 5%;
	text-align: left;
}

#footer ul.firstnavi li {
    display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 50%;
	margin: 20px 0;
}

#footer ul.firstnavi li a {
    font-family: rift-soft, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: #fff;
	transition: all .3s;
}

#footer ul.firstnavi li a:hover {
	color: #FFD800;
}

#footer ul.secondnavi {
    font-size: 0;
    margin: 0;
	padding: 0 0 5%;
	text-align: left;
}

#footer ul.secondnavi li {
    display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 50%;
	margin: 20px 0;
}

#footer ul.secondnavi li a {
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: #fff;
	transition: all .3s;
}

#footer ul.secondnavi li a:hover {
	color: #E3007F;
}

/* ========== ページトップ =========== */

.scrollDown{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #EB5505;
	color: #fff;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	width: 584px;
	height: 80px;
}
.scrollDown:before{
	content: '';
	position: absolute;
	left: 50%;
	top: -25px;
	z-index: 2;
	width: 1px;
	height: 50px;
	background: #fff;
    -webkit-animation: scroller 2s cubic-bezier(.65,.05,.36,1) 0s infinite;
    animation: scroller 2s cubic-bezier(.65,.05,.36,1) 0s infinite;
}


#page-scroll {
    display: inline-block;
    position: fixed;
    width: 100%;
    height: 90px;
    padding: 15px 10px 0;
    left: 0;
    z-index: 3;
    text-align: center;
    background-color: rgba(255,255,255,0.9);
    transition:all .6s cubic-bezier(.19,1,.22,1);
    box-shadow:1px 3px 10px 3px rgba(0, 0, 0, 0.3);
}

#page-scroll.active {
    bottom: -100px!important;
	transition:all .6s cubic-bezier(.19,1,.22,1);
}

#page-scroll.change {
    background-color: rgba(255,255,255,0);
}

p#Scroll {
    position: fixed;
    line-height: 1;
    width: 12px;
    height: 12px;
    top: auto;
    bottom: 200px;
    left: auto;
    right: 45px;
    margin: auto;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
}

p#Scroll:after {
    content: '';
	position: absolute;
	top: 0;
	bottom: auto;
	left: -30px;
	right: 0;
	margin: auto;
	display: block;
	width: 1px;
	height: 220px;
	background-color: #000000;
	/*-webkit-animation: scroller 2s cubic-bezier(.65,.05,.36,1) 0s infinite;
    animation: scroller 2s cubic-bezier(.65,.05,.36,1) 0s infinite;*/
	transition: all .5s ease;
}

p#Scroll.fixed {
    bottom: -20px;
}

p#Scroll.fixed:after {
	height: 220px;
	top: 220px;
}

@media screen and (min-width: 1280px) {

    p#Scroll {
	    opacity: 1;
		visibility: visible;
		transition: all .3s ease;
    }

}

@keyframes scroller{
	0% {
		top: 0px;
	    height: 0;
	}
	20% {
		top: 0px;
	    height: 200px;
	}
	40% {
		top: 200px;
	    height: 100px;
	}
	50% {
		top: 0px;
	    height: 50px;
	}
	100% {
		top: 0px;
	    height: 0px;
	}
}

.charaimages {
    display: none;
}

#footer h4 {
    display: block;
	margin: 0 auto 14px;
	max-width: 170px;
	width: 100%;
}

#copyright {
	font-family: rift-soft, sans-serif;
	font-weight: 700;
	text-align: center;
    color: #fff;
	font-size: 15px;
	letter-spacing: 0.15em;
	padding: 20px 0 0;
	border-top: solid 1px #fff;
	width: 96%;
	margin: 0 2%;
}

#copyright.eng {
	border-top: none;
}

/*======================================
 
	PC
 
=======================================*/
@media screen and (min-width: 1024px) {

    #footer {
	    position: absolute;
		bottom: 0;
		left: 0;
        width: 100%;
		height: 530px;
        padding: 50px 0;
    }
	
	#footer.eng {
	    position: relative;
        width: 100%;
		height: auto;
        padding: 40px 20px 80px;
    }
	
	#footer ul.firstnavi {
	    padding: 2% 0 2%;
		text-align: center;
	}
	
	#footer ul.firstnavi li {
        width: auto;
        margin: 20px 2%;
    }

    #footer ul.firstnavi li a {
        font-size: 20px;
    }
	
	#footer ul.secondnavi {
	    position: absolute;
		bottom: 130px;
		left: 0;
        width: 100%;
		padding: 2% 0 2%;
		text-align: center;
	}
	
	#footer ul.secondnavi li {
        width: auto;
        margin: 20px 1%;
    }

    #footer ul.secondnavi li a {
        font-size: 12px;
    }
	
	#footer.normal {
	    position: absolute;
		bottom: 0;
		left: 0;
		height: 250px;
        padding: 45px 20px;
    }
	
	/* ========== お問い合わせ部分 =========== */
	
	#page-scroll {
        height: 100px;
		padding: 25px 10px;
        background-color: rgba(255,255,255,0.9);
        box-shadow:1px 3px 10px 3px rgba(0, 0, 0, 0.3);
    }
	
	.charaimages {
        display: block;
		position: absolute;
        max-width: 100px;
        width: 100%;
        left: 50%;
		margin-left: -420px;
    }
	
	#copyright {
        position: absolute;
		width: 84%;
		margin: 0 8%;
		bottom: 100px;
		left: 0;
		text-align: center;
		font-size: 15px;
		letter-spacing: 0.1em;
		color: #fff;
		letter-spacing: 0.15em;
		padding: 15px 0 0;
		border-top: solid 1px #fff;
    }
	
	#copyright.eng {
	    position: static;
	}


}

button.buttonimage-mini {
    width: 50%;
	max-width: 172px;
    padding: 13px 0;
    border-radius: 100px;
	cursor: pointer;
	text-align: center;
	background-color: #000;
	border: none;
	margin: 0;
	transition: all .3s;
}

button.buttonimage-mini.first {
    margin: 0 3px 0 0;
}

#page-scroll.change button.buttonimage-mini {
	background-color: #E3007F;
}

button.buttonimage-mini img {
    display: block;
    width: auto;
	height: 18px;
	margin: 0 auto;
}


/*======================================
 
	PC
 
=======================================*/

@media screen and (min-width: 1024px) {
	
	button.buttonimage-mini {
        max-width: 260px;
        padding: 15px 0;
        cursor: pointer;
        text-align: center;
        margin: 0 15px;
    }
	
	button.buttonimage-mini img {
        width: auto;
        height: 20px;
        margin: 0 auto;
    }

    button.buttonimage-mini:hover,
    #page-scroll.change button.buttonimage-mini:hover {
        background-color: #009FE8;
    }

}

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

    #TopBlock01 dl dd p {
        font-size: 13px;
    }

    button.buttonimage-mini {
        max-width: 140px;
    }
	
	button.buttonimage-mini img {
        height: 15px;
    }
}


/*-------------------------------------------*/
/*	ページ遷移
/*-------------------------------------------*/

#pagebute-wrap {
    width: 100%;
	margin: 5% auto;
	font-size: 0;
	line-height: 0;
	padding: 0;
	text-align: center;
}
	
#pagebute-wrap span,
#pagebute-wrap a {
	display: inline-block;
	position: relative;
	white-space: nowrap;
	font-size: 30px;
	line-height: 1.4em;
	font-weight: 700;
	padding: 0px 12px;
	margin: 0 0 0 0;
	border: solid 4px transparent;
	border-radius: 60%;
}

#pagebute-wrap span.page-numbers.dots {
}

#pagebute-wrap a.page-numbers {
    color: #333333;
    text-decoration: none;
    background-color: transparent;
}

#pagebute-wrap a.prev,
#pagebute-wrap a.next {
	font-family: rift-soft, sans-serif;
	font-weight: 700;
	padding: 0px 0;
	border: none;
	transform: scale(0.6, 1);
}

#pagebute-wrap a.prev {
	font-weight: bold;
	color: #D7D7D7;
	text-decoration: none;
	white-space: normal;
}
	
#pagebute-wrap a.next {
	color: #D7D7D7;
	text-decoration: none;
	white-space: normal;
}

#pagebute-wrap span.current,
#pagebute-wrap a:hover.page-numbers {
    color: #000;
	background-color: transparent;
	border: solid 4px #000;
}

#pagebute-wrap a:hover.prev,
#pagebute-wrap a:hover.next {
    color: #009FE8;
	background-color: transparent;
	border: none;
}

table.serioustable {
    width: 100%;
	text-align: left;
	margin: 1% 0;
	border-collapse:  collapse; /* セルの線を重ねる */
}

table.serioustable thead th {
    background-color: #B7B7B7;
}

table.serioustable tbody th {
    background-color: #E7E7E7;
}

table.serioustable th,table.serioustable td {line-height: 1.4; padding: 0.5% 1%;border: solid 1px;  /* 枠線指定 */}

table.serioustable tbody th,table.serioustable tbody td {}

table.serioustable th {width: 30%;}
table.serioustable td {width: 70%;}


/*
-------------------------------------------
	G O O G L E M A P / Y O U T U B E
-------------------------------------------
*/


.btn_black_line {
    position: relative;
	text-align: center;
	display: block;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	background-color: #fff;
	color: #000;
	width: 100%;
	max-width: 260px;
	margin: 0 auto;
	padding: 12px 10px 12px;
	transition: .3s;
	border: solid 2px #000;
	border-radius: 60px;
}

.btn_black_line span:before {
    content: '';
	display: inline-block;
	vertical-align: -15%;
	background-image: url("../images/icon/list-arrow-black.svg");
	background-size: cover;
	width: 10px;
	height: 18px;
	margin-right: 10px;
}

a.btn_black_line:hover {
	color: #fff;
	background-color: #000;
}

a.btn_black_line:hover span:before {
	background-image: url("../images/icon/list-arrow-white.svg");
}

.btn_black {
    position: relative;
	text-align: center;
	display: block;
	cursor: pointer;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	background-color: #000000;
	color: #FFF;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	padding: 15px 10px 15px;
	transition: .3s;
}

a.btn_black:hover {
	background-color: #A1A1A1;
	color: #FFF;
}

#form_submit_button,
#confirm_submit_button,
#confirm_cancel_button {
	position: relative;
	text-align: center;
	display: block;
	cursor: pointer;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	background-color: #000000;
	color: #FFF;
	width: 100%;
	margin: 0 auto 20px;
	padding: 15px 10px 15px;
	border-radius: 0;
	transition: .3s; /* 縺ｪ繧√ｉ縺句､牙喧 */
    border: none;
	text-decoration: none;
	-webkit-appearance: none;
}

#confirm_cancel_button {
    font-size: 18px;
	padding: 15px 10px 10px;
}

#form_submit_button:hover,
#confirm_submit_button:hover,
#confirm_cancel_button:hover{
	box-shadow: none;
	color: #fff; /* 閭梧勹濶ｲ     */
    background: #E3007F;
	transition: all .3;
}

#confirm_submit_button {
	margin: 20px auto 20px;
}

.double {
    display: inline-block;
	vertical-align: top;
	width: 100%;
	margin-right: 0;
	padding: 0;
}

.double .submitbtn {
    display: block;
	width: 100%;
	max-width: 900px;
}

button#open-request-document {
    position:relative;
}

button#open-request-document:before {
    content: none;
}

button#open-request-document:hover:before {
    content: none;
}

@media screen and (min-width: 750px) {

    .submitter p#form_submit {
        padding: 0 0 10px;
    }
	
	.submitter.close {
        top:40px;
        right:40px;
        width: 80px;
        height: 80px;
    }
	
	.submitter span {
        padding: 20px 0 0;
        font-size: 14px;
    }
	
	#form_submit_button,
    #confirm_submit_button,
    #confirm_cancel_button {
        font-size: 26px;
        line-height: 1.4;
        font-weight: 700;
        padding: 20px 10px 20px;
    }


}

@media screen and (min-width: 1024px) {

	button#open-request-document:before {
        content: '';
        top: -40px;
        left: -130px;
		opacity: 0;
        transition: all .3s;
    }

    button#open-request-document:hover:before {
        content: '';
        display: inline-block;
        width: 226px;
        height: 75px;
        background-color: transparent;
        position: absolute;
        top: -70px;
        left: -130px;
        background-image: url("../images/img/common/step/fukidashi.svg");
        background-size: 226px 75px;
		opacity: 1;
        transition: all .3s;
    }
	
}

/*======================================
 
	PC
 
=======================================*/
@media screen and (min-width: 1024px) {

	.submitter {
		padding: 0;
		font-size: 0;
	}
	
	.submitter p#form_submit {
        padding: 0 0 10px;
    }
	
	.submitter span {
        padding: 10px 0 0;
    }

	.submitbtn {
		display: block;
		width: 100%;
		max-width: 400px;
		padding: 8px 20px 10px;
		background-color: #330033;
		color: #fff;
		font-size: 20px;
		line-height: 1.2;
		font-weight: 700;
		text-align: center;
		margin: 0 auto;
		letter-spacing: 0.02em;
	}
	
	.submitbtn b {
		font-size: 11px;
		line-height: 1.4;
		font-weight: 100;	
	}
	
	.double {
		display: inline-block;
		vertical-align: top;
		width: 48%;
		margin-right: 4%;
		padding: 0;
	}

	.double:nth-child(2n) {
	   margin-right: 0;
	}
	
	#form_submit_button,
    #confirm_submit_button,
    #confirm_cancel_button {
        cursor: pointer;
        font-size: 20px;
        line-height: 1.4;
        padding: 15px 10px 15px;
    }
	

}

@media screen and (min-width: 1024px) and (max-height: 860px) {
   /* 横幅800px以下で、高さ700px以下の場合 */
   
   .modal{
        overflow: hidden;
    }
   
    #Inquiry header h2 {
        margin: 0 0 2px;
    }
	
	#Inquiry header p {
        font-size: 11px;
    }
	
	p.caution {
	    font-size: 11px;
	}
   
   .inquiry-inner {
        padding: 10px 0 0;
    }

   .inquiry-inner dl {
        padding: 2px 0;
        margin: 10px 0;
    }
	
	.submitter {
		padding: 0 0 10px;
	}
	
	.submitter span {
        padding: 5px 0 0;
        color: #4591FF;
        font-size: 12px;
    }
   
    input[type=text],
    input[type=tel] ,
    input[type=email]{
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: #333;
        border: none;
        height : 20px;
        padding :0 10px;
    }
	
    input::placeholder,
    textarea::placeholder{
      font-size: 14px;
      font-weight: 700;
    }
	
	div#confirm_field dl dt{
        width : 30%;
        padding : 8px 0 8px 0;
        font-size: 14px;
    }

    div#confirm_field dl dd{
        width : 65%;
        padding : 8px 0 8px 0;
        font-size: 14px;
    }

}

/*
-------------------------------------------
	G O O G L E M A P / Y O U T U B E
-------------------------------------------
*/


/* 動画
─────────────────────────────────────────*/	
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	margin-top:20px;
	height: 0;
	overflow: hidden;
	margin-bottom: 20px;
}

#Videoclips .videoWrapper {
	margin: 0;
}

.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

	
/* iPhone 3G/3GS だけに指定したい場合 */
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {
 
}
 
/* iPhone 4 だけに指定したい場合 */
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {
 
}
 
/* iPad CSS だけに指定したい場合 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 
}