/*
Theme Name: LandO
Theme URI: http://underscores.me/
Author: 4eyes
Author URI: http://underscores.me/
Description: for LandO
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/


@import './css/base.css';
@import './css/general_classes.css';
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap');


html, body {
	font-size: 14px;
	color: #2d2d2d;
	letter-spacing: .05em;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	/*background: url(./images/bg.png) #fffce6 repeat 0 0;
	background-color: #fff700;*/
}

/*リンク*/
a { color: #333; transition: .3s; }
a:link,
a:visited,
a:hover,
a:active {
	color: #333;
}
/*a:hover { opacity: .5 !important; }
a:hover img { opacity: 1 !important; }*/

.mincho {
	font-family: "Times", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* ---------------------------------
*    Structure
*/

#wrap {
	width: 100%;
	margin-top: 100px;
	background-color: #fff;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
}
.front #wrap { margin-top: 0; }
#contents {}
#contents .inner {
	width: 1300px;
	margin: 0 auto;
}

#footer {
	width: 100%;
	padding: 50px 0;
	/*border-top: 1px solid #333;*/
}
#footer .inner {
	width: 1300px;
	margin: 0 auto;
}

/* ---------------------------------
*    Header
*/

#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 95px;
	z-index: 999;
	border-top: 5px solid #fff700;
}

#header::before {}

#header .inner {
	position: relative;
	width: 1300px;
	margin: 0 auto;
}

/* Logo */

#mainLogo {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-weight: normal;
	background-color: #fff700;
	padding: 30px 20px;
	border-radius: 0 0 5px 5px;
}

#mainLogo a{
	text-indent: -999em;
	background: url(./images/logo.png) no-repeat 0 0;
	width: 100px;
	height: 57px;
	display: block;
	background-size: 100% !important;
}

/*nav*/

#gdrawer {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}

#gdrawer nav {
	position: absolute;
	top: 0;
	left: 200px;
}

#gdrawer nav>ul>li {
	display: inline-block;
	line-height: 1;
	vertical-align: top;
	position: relative;
}

#gdrawer nav>ul>li>a {
	position: relative;
	font-size: 16px;
	padding: 0 20px;
	margin-right: 20px;
	height: 95px;
	line-height: 95px;
	display: block;
	text-align: center;
	font-family: 'Roboto Slab', serif;
}

#gdrawer nav>ul>li:nth-of-type(3)>a { margin-right: 30px; }

.front #gdrawer nav>ul>li>a { color: #fff; }

#gdrawer nav>ul>li:not(:nth-of-type(3))>a::after {
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	display: block;
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;

	-webkit-transform-origin: right top;
	transform-origin: right top;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: transform .5s;
	transition: transform .5s;
}

.front #gdrawer nav>ul>li>a::after { background: #fff; }

#gdrawer nav>ul>li:not(:nth-of-type(3))>a:hover::after {
	-webkit-transform-origin: left top;
	transform-origin: left top;

	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

#gdrawer nav>ul>li>a.current:after { -webkit-transform: scaleX(1); transform: scaleX(1); }

#gdrawer nav>ul>li:nth-of-type(3)>a::before {
    content: '';
    display: block;
    width: 13px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 2px;
    bottom: 0;
    margin: auto;
    right: 0;
    transition: 0.4s;
    vertical-align: middle;
}

#gdrawer nav>ul>li:nth-of-type(3)>a::after {
  content: '';
  display: block;
  width: 13px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 2px;
  bottom: 0;
  margin: auto;
  right: 0;
  transition: 0.4s;
  vertical-align: middle;
}

.front #gdrawer nav>ul>li:nth-of-type(3)>a::before,.front #gdrawer nav>ul>li:nth-of-type(3)>a::after { background: #fff; }
#gdrawer nav>ul>li:nth-of-type(3)>a::after { transform: rotate(90deg); }
#gdrawer nav>ul>li:nth-of-type(3)>a::before, #gdrawer nav>ul>li:nth-of-type(3)>a.active::after { transform: rotate(360deg); }
#gdrawer nav>ul>li:nth-of-type(3)>ul {
	display: none;
	position: absolute;
	left: 0;
	top: 74px;
	width: 180px;
	border: 1px solid #333;
	background-color: rgba(255,255,255,.3);
}
#gdrawer nav>ul>li:nth-of-type(3)>ul>li>a {
	display: block;
	padding: 15px 20px;
	font-family: 'Roboto Slab', serif;
	border-bottom: 1px solid #333;
}



.front #gdrawer nav>ul>li:nth-of-type(3)>ul {
	border: 1px solid #fff;
}
.front #gdrawer nav>ul>li:nth-of-type(3)>ul>li>a {
	color: #fff;
	border-bottom: 1px solid #fff;
}

#gdrawer nav>ul>li:nth-of-type(3)>ul>li:last-of-type>a { border-bottom: 0; }


/* ---------------------------------
*    Common
*/

/*not-found*/

.not-found {}


/*Cotact*/
.c-contact {
	padding: 100px 0;
	box-sizing: border-box;
	background-color: #fff700;
}

.c-contact h2 {
	font-family: 'Roboto Slab', serif;
	font-size: 22px;
	text-align: center;
	line-height: 2;
}

.c-contact .text {
	font-size: 14px;
	text-align: center;
	line-height: 2;
	margin-top: 30px;
}

.c-contact .btn-contact {
	font-family: 'Roboto Slab', serif;
	font-size: 30px;
	font-weight: bold;
	margin: 50px auto 0;
	display: block;
	width: 200px;
	text-align: center;
}

.c-contact .btn-contact { text-decoration: underline; }


/* ---------------------------------
*    Top
*/

.intro {
	position: relative;
	display: block;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #000;
	z-index: 1;
}

.intro .video-wrap {
	position: absolute;
}

.intro .video-wrap iframe {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.intro .catch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.5);
	z-index: 100;
}

.intro .catch {
	font-size: 40px;
	color: #fff;
	line-height: 2;
	letter-spacing: .5;
	text-align: center;
}

.top section {
	padding: 150px 0;
	box-sizing: border-box;
}

.top section header {
	text-align: center;
	margin-bottom: 100px;
}
.top section h1 {
	font-family: 'Roboto Slab', serif;
	font-size: 50px;
	text-align: center;
	position: relative;
	padding: 20px 30px;
	display: inline-block;
	font-weight: bold;
}

/*.top section h1 span::before, .top section h1 span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 50%;
	height: 1px;
	background-color: #333;
}
.top section h1 span::before {
	right: 100%;
}
.top section h1 span::after {
	left: 100%;
}*/

.top section .more {
	text-align: center;
	margin: 50px 0 0 0;
}

.top section .more a {
	font-family: 'Roboto Slab', serif;
	display: inline-block;
	text-align: center;
	font-size: 25px;
	padding: 10px;
}

.top section .more a:hover { color: #ff5e00; }

.top section .more a span {
	position: relative;
	display: inline-block;
	padding-right: 50px;
}

.top section .more a span::after{
	transition: .3s;
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	background: url(./images/arrow.svg) no-repeat;
	background-size: 100%;
	width: 30px;
	height: 15px;
	margin-top: -3px;
	transition: .3s;
}
.top section .more a:hover span::after {
	right: 0;
	background-image: url(./images/arrowFF5E00.svg);
}

.top .news .flex article {
	width: 24.9%;
}

.top .service { padding-bottom: 0; }

.top .service ul {}

.top .service>ul>li {
	position: relative;
	height: 65vh;
	min-height: 600px;
	overflow: hidden;
}

.top .service>ul>li a .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: #fff;

    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: left top;
    transform-origin: left top;

    -webkit-transition: all .7s ease 0.1s;
    transition: all .7s ease 0.1s;
}


.top .service>ul>li.is-show a .overlay {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
}

.top .service>ul>li .img {
	float: left;
	width: 50%;
	height: 100%;
	overflow: hidden;

    -webkit-transition: all .7s ease 0ms;
    transition: all .7s ease 0ms;
}

.top .service>ul>li img {
    /*width: 100%;*/
    display: block;
    height: auto;
	-webkit-transform: translateY(50px);
    transform: translateY(50px);

    -webkit-transition: all .7s ease 0ms;
    transition: all .7s ease 0ms;
}

.top .service>ul>li.is-show img {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.top .service>ul>li a:hover img {
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
}

.top .service>ul>li a:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.top .service>ul>li .desc {
	float: left;
	width: 50%;
	height: 100%;
	padding: 100px;
	box-sizing: border-box;
	background-color: #fff700;
	text-align: center;
}

.top .service>ul>li .desc h2 {
	font-family: 'Roboto Slab', serif;
	font-size: 45px;
	display: inline-block;
	color: #333;
	font-weight: bold;
	margin-bottom: 30px;
}

.top .service>ul>li .desc div {
	font-size: 16px;
	line-height: 2;
	height: 115px;
	margin-top: 15px;
	color: #333;
	text-align: left;
}

.top .service>ul>li .desc div ul:first-of-type { margin-bottom: 20px; }
.top .service>ul>li .desc div ul:nth-of-type(2) { color: #888; }

/*.top .service>ul>li .desc div ul li {
	position: relative;
	padding-left: 15px;
}

.top .service>ul>li .desc div ul li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	position: absolute;
	top: 17px;
	left: 0;
	margin-top: -3px;
	background-color: #333;
}
*/
.top .service>ul>li .desc span {
	transition: .3s;
	font-family: 'Roboto Slab', serif;
	font-size: 20px;
	position: relative;
	display: inline-block;
	padding-left: 50px;
	margin-top: 50px;
}

.top .service>ul>li .desc span::before {
	transition: .3s;
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	background: url(./images/arrow.svg) no-repeat;
	background-size: 100%;
	width: 30px;
	height: 15px;
	margin-top: -3px;
}
.top .service>ul>li a:hover span { color: #ff5e00; }
.top .service>ul>li a:hover .desc span::before {
	left: 10px;
	background-image: url(./images/arrowFF5E00.svg);
}

.top .service>ul>li:nth-child(odd) .desc {
	right: 0;
}

.top .service>ul>li:nth-child(even) .desc {
	left: 0;
}

.top .service>ul>li:nth-child(even) .img {
	float: right;
}

.top .client {
	background-color: #fff;
}

.top .client .desc {
	line-height: 2;
	font-size: 16px;
	text-align: center;
}

.top .client ul {
	width: 50%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top .client ul li { width: 33%; font-size: 0; }
.top .client ul li img {
	width: 100%;
	height: auto;
}
.top .instagram { background-color: #fffdee; }
.top .instagram ul {
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.top .instagram ul li { width: 25%; font-size: 0; }
.top .instagram ul li img {
	width: 100%;
	height: auto;
}

/* ---------------------------------
*    Page
*/

/*スライダー*/
.slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         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
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -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
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    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: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-dots
{
    position: absolute;
    bottom: -45px;

    display: block;

    width: 100%;
    padding: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 12px;
    height: 12px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 12px;
    height: 12px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
/*.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    -ms-filter: "alpha(opacity=25)";  
    filter: alpha(opacity=25);        
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-filter: "alpha(opacity=25)";
    filter: alpha(opacity=25);        
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    -ms-filter: "alpha(opacity=75)";  
    filter: alpha(opacity=70);        
    color: black;
}*/

#category,
#service,
.page {
	padding: 60px 0;
}

#category h1,
#service h1,
.page h1 {
	font-family: 'Roboto Slab', serif;
	text-align: center;
	font-size: 50px;
	margin-bottom: 60px;
	line-height: 1.3;
	font-weight: bold;
}

/*service*/

#service { padding-bottom: 0; }
#service section { margin-bottom: 100px; }
#service .news {
	padding: 60px 0;
	margin: 100px 0 0;
}

#service .entertainment ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#service .entertainment ul li {
	width: 49.9%;
	position: relative;
	height: 433px;
	margin-bottom: .1%;
}

#service .entertainment ul li img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#service .entertainment ul li sup {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.5);

	-webkit-transition: all .7s ease 0.1s;
	transition: all .7s ease 0.1s;
}

#service .entertainment ul li:hover sup {
	background-color: rgba(255,247,0,.9);
}

#service .entertainment ul li div {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 520px;
	height: 110px;
	margin: -55px 0 0 -260px;
}

#service .entertainment ul li div h2 {
	color: #fff;
	font-family: 'Roboto Slab', serif;
	text-align: center;
	font-size: 25px;
	padding-bottom: 20px;
	line-height: 1.3;

	-webkit-transition: all .7s ease 0.1s;
	transition: all .7s ease 0.1s;
}

#service .entertainment ul li div p {
	color: #fff;
	line-height: 2;
	font-size: 16px;

	-webkit-transition: all .7s ease 0.1s;
	transition: all .7s ease 0.1s;
}

#service .entertainment ul li:hover div * { color: #000; }


#service .fashion ul li {
	position: relative;
	height: 600px;
	margin-bottom: 120px;
}

#service .fashion ul li sup {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    background: #fff;

    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: right top;
    transform-origin: right top;

    -webkit-transition: all .7s ease 0.1s;
    transition: all .7s ease 0.1s;
}

#service .fashion ul li:nth-of-type(odd) sup {
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

#service .fashion ul li.is-show sup {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}

#service .fashion ul li div {
	position: absolute;
	top: 100px;
	z-index: 2;
	padding: 40px;
	background-color: rgba(255,247,0,1);
}

#service .fashion ul li:nth-of-type(odd) div {
	right: 0;
}

#service .fashion ul li div dl:first-of-type {
	margin-bottom: 50px;
}

#service .fashion ul li div dl:nth-of-type(2) { color: #888; }

#service .fashion ul li div dl dt {
	font-size: 30px;
	margin-bottom: 25px;
	font-weight: bold;
}

#service .fashion ul li div dl dt dd {
	font-size: 16px;
	line-height: 1.8;
}

#service .fashion ul li img {
	position: absolute;
	top: 0;
	width: 901px;
	height: auto;
}

#service .fashion ul li:nth-of-type(even) img {
	right: 0;
}

/*news*/

.news { background-color: #fffdee; }

.post-list .flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.post-list article {
	background-color: #fff;
	position: relative;
	width: 31%;
	margin-bottom: 3.5%;
	border: 1px solid #fffbde;
	box-sizing: border-box;

	opacity: 0;
    -webkit-transform-origin: left top;
    transform-origin: left top;

    -webkit-transition: all .7s ease 0.1s;
    transition: all .7s ease 0.1s;
}

.post-list article:hover {
	border: 1px solid #b89e21;
}

.post-list article.is-show {
	opacity: 1
}

.post-list article a {
	display: block;
}

.post-list article .new {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	color: #fff;
	background-color: #ff5e00;
	font-weight: bold;
	font-size: 12px;
	padding: 10px;
	border-radius: 0 0 3px 0;
}

.post-list article .thumbnail {
	overflow: hidden;
	height: 380px;
}

.post-list article .thumbnail img {
	width: 100%;
	height: auto;

	-webkit-transform: scale(1);
	transform: scale(1);

	-webkit-transition: all .7s ease 0ms;
	transition: all .7s ease 0ms;
}

.post-list article:hover .thumbnail img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.post-list article .desc {
	padding: 25px 30px;
}

.post-list article .desc h2 {
	font-size: 15px;
	line-height: 1.5;
}

.post-list article .info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 10px;
	font-family: 'Roboto Slab', serif;
	font-size: 13px;
}

.post-list article .info time {
	height: 25px;
	line-height: 25px;
}

.post-list article .info .category {
	color: #fff;
	height: 26px;
	line-height: 26px;
	padding: 0 15px;
	border-radius: 13px;
	background-color: #b89e21;
}

/*.post-list article .info .category.entertainment { background-color: #24b300; }
.post-list article .info .category.art { background-color: #b30074; }
.post-list article .info .category.fashion { background-color: #b30000; }
.post-list article .info .category.studio { background-color: #0071b3; }*/

.post-list article h3 {
	line-height: 1.8;
}

/*about*/

.page .about {
	width: 900px;
	margin: 0 auto;
}

.page .about h3 {
	font-size: 25px;
	font-family: 'Roboto Slab', serif;
}

.page .about>p {
	line-height: 2.2;
	margin-bottom: 50px;
}

.page .about ul { margin: 50px 0 50px; }
.page .about ul li {
	font-size: 16px;
	text-align: center;
	margin-bottom: 20px;
	line-height: 2.2;
}
.page .about ul li:nth-of-type(2) { margin-bottom: 50px; }

.page .about div {
	margin: 100px 0;
	text-align: center;
}

/*contact*/
.page .contact {
	text-align: center;
}

.page .contact p {
	line-height: 2.2;
	margin-bottom: 50px;
}

.page .mail a {
	font-family: 'Roboto Slab', serif;
	font-size: 18px;
	display: inline-block;
	padding: 0 30px;
	height: 60px;
	line-height: 60px;
	border-radius: 30px;
	border: 1px solid #ff5e00;
	color: #ff5e00;
}
.page .mail a:hover {
	color: #fff;
	background-color: #ff5e00;
}

/*
.page .contact .wpcf7-form {
	width: 50%;
	margin: 30px auto;
}

.page .contact .wpcf7-form label {
	display: block;
	text-align: left;
}

.page .contact .wpcf7-form span {
	display: block;
	margin-bottom: 20px;
}
.page .contact .wpcf7-form br { display: none; }

.page .contact .wpcf7-form input[type=text],
.page .contact .wpcf7-form input[type=email],
.page .contact .wpcf7-form textarea {
	width: 100%;
	padding: 5px;
	border: 1px solid #bbb;
	box-sizing: border-box;
}

.page .contact .wpcf7-form input[type=submit] {
	font-size: 16px;
	padding: 12px 25px;
	background-color: #ff5e00;
	color: #fff;
	border: none;
	border-radius: 3px;
}

div.wpcf7-response-output {
	border: none;
	font-weight: bold;
	font-size: 13px !important;
	padding: 10px;
	margin: 0;
}

div.wpcf7-mail-sent-ok {
	border: none;
}

div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
	border: none;
}

div.wpcf7-spam-blocked {
	border: none;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
	border: none;
}

span.wpcf7-not-valid-tip { 
	font-size: 12px;
	text-align: left;
	margin-bottom: 0;
}

div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
	font-size: 12px;
	padding: 10px;
	line-height: 2;
}*/

/* ---------------------------------
*    Single
*/

#single {}

#single .inner {
	width: 1000px;
	margin: 0 auto;
}

#single article {
	width: 740px;
	padding: 50px 130px 94px;
	margin: 0 auto;
	background-color: #fff;
}

#single article header {
	padding: 10px 0;
}

#single article header .category {
	display: inline-block;
	font-family: 'Roboto Slab', serif;
	color: #fff;
	height: 26px;
	line-height: 26px;
	padding: 0 15px;
	border-radius: 13px;
	margin-bottom: 10px;
	background-color: #b89e21;
}

/*#single article header .category.entertainment { background-color: #24b300; }
#single article header .category.art { background-color: #b30074; }
#single article header .category.fashion { background-color: #b30000; }
#single article header .category.studio { background-color: #0071b3; }*/

#single article header h1 {
	font-size: 30px;
	line-height: 1.5;
}

#single article .meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#single article .meta .the_time {
	font-family: 'Roboto Slab', serif;
	line-height: 30px;
	height: 30px;
}

#single article .meta aside a {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background-color: #ff5e00;
	border-radius: 50%;
	margin-left: 10px;
	text-align: center;
}

#single article .meta aside a img {
	width: 60%;
	height: auto;
}
#single article .meta aside a.fb img { width: 33%; }

#single article .content {
	margin: 50px 0 0;
}

#single article .content h1,
#single article .content h2,
#single article .content h3,
#single article .content h4,
#single article .content h5,
#single article .content h6 {
	margin: initial;
	padding: initial;
}

#single article .content p {
	margin-bottom: 15px;
	padding: initial;
	line-height: 1.8;
	word-break: break-all;
}

#nav-below {
	margin: 50px 0 100px;
}

#nav-below .previous { float: left; }
#nav-below .next { float: right; }

#nav-below .previous a,
#nav-below .next a {
	position: relative;
	line-height: 1;
	display: inline-block;
	padding: 10px 8px;
	line-height: 1.5;
}

#nav-below .previous a { padding-left: 25px; }
#nav-below .next a { padding-right: 25px; }

#nav-below .previous a::after,
#nav-below .next a::after {
	position: absolute;
	top: 50%;
	width: 4px;
	height: 4px;
	content: '';
	transform: rotate(45deg);
	margin-top: -3px;
}

#nav-below .next a::after {
	right: 12px;
	border-top: 1px solid #636363;
	border-right: 1px solid #636363;
}

#nav-below .previous a::after {
	left: 12px;
	border-bottom: 1px solid #636363;
	border-left: 1px solid #636363;
}

/* ---------------------------------
*    Footer
*/

#footer ul {
	float: left;
	width: 35%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#footer ul li a {
	font-family: 'Roboto Slab', serif;
	font-size: 15px;
	height: 20px;
	line-height: 20px;
}

#footer ul li a:hover {
	opacity: .8;
}

#footer aside {
	float: right;
}

#footer aside img {
	width: 20px;
	height: auto;
}


#page-top {
	display: none;
	position: fixed;
	right: 3%;
	bottom: 3%;
	z-index: 9999;
}
#page-top a {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: relative;
	display: block;
	background-color: #ff5e00;
}
#page-top a:before {
	content: '';
	width: 11px;
	height: 11px;
	position: absolute;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	transform: rotate(45deg);
	top: 50%;
	left: 19px;
	margin-top: -3px;
	cursor: pointer;
}

/* ---------------------------------
*    Media Query
*/


/*@media screen and (max-width: 1024px) {*/
/* 1024pxまでの幅の場合に適応される */
/*}*/
/*@media screen and (max-width: 768px) {*/
/* 768pxまでの幅の場合に適応される */
/*}*/

@media( max-width:480px ){ 
/* 480pxまでの幅の場合に適応される */

/* ---------------------------------
*    Common
*/
html, body { min-width: auto; }

#contents .inner { width: 100%; }
#footer .inner,
#header .inner {
	width: 92% !important;
	padding: 0 4%;
}

#wrap { margin-top: 65px; }

/*loading*/

#loading .inner {
	width: 100%;
	display: block;
}

#loading .inner a {
	font-size: 16px;
	width: 100%;
	padding: 20px 0;
	margin-bottom: 20%;
}
#loading .inner a:last-of-type { margin-bottom: 0; }

/*header*/

#header,
#header>.inner {
	height: 50px;
}

#mainLogo {
	left: 4%;
	padding: 15px;
}
#mainLogo a {
	width: 65px;
	height: 37px;
}

/*drawer*/

#gdrawer-btn {
	cursor: pointer;
	height: 50px;
	width: 50px;
	position: absolute;
	top: 5px;
	right: 5px;
}

#gdrawer-btn span {
	background: #333;
	display: block;
	height: 1px;
	left: 50%;
	margin: 0 0 0 -13px;
	position: absolute;
	top: 50%;
	width: 26px;
}

#gdrawer-btn span::before,
#gdrawer-btn span::after {
	background: #333;
	content: '';
	display: block;
	height: 100%;
	left: 50%;
	margin: 0 0 0 -50%;
	position: absolute;
	width: 100%;
}

#gdrawer-btn span::before { margin-top: -8px; }
#gdrawer-btn span::after { margin-top: 8px; }

.front #gdrawer-btn span,
.front #gdrawer-btn span::before,
.front #gdrawer-btn span::after { background-color: #fff; }

	.gdrawer-show #gdrawer {
		display: block;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1002;
	}

	#gdrawer {
		display: block;
		display: none;
		position: relative;
	}

	#gdrawer-bg {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	#gdrawer #gdrawer-content {
	    height: 100%;
	    width: 100%;
	    background: rgba(0,0,0,0.9);
	    position: relative;
	    margin-left: -100%;
	}

	#gdrawer .gdrawer-body {
		height: 100%;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	#gdrawer #gdrawer-close {
		position: relative;
		color: #fff;
		width: 60px;
		height: 60px;
		float: right;
	}

	#gdrawer #gdrawer-close span {
		position: absolute;
		top: 58%;
		left: 13%;
		display: inline-block;
		width: 25px;
		height: 1px;
		background-color: #fff;
	}

	#gdrawer #gdrawer-close span:nth-of-type(1) {
		-webkit-transform: translateX(40%) rotate(45deg);
		transform: translateX(40%) rotate(45deg);
	}
	#gdrawer #gdrawer-close span:nth-of-type(2) {
		-webkit-transform: translateX(40%) rotate(135deg);
		transform: translateX(40%) rotate(135deg);
	}

	#gdrawer #gdrawer-close:before {
		border-top: 3px solid #fff;
		border-bottom: : 3px solid #fff;
	}

#gdrawer nav {
	width: 100%;
	padding-top: 20%;
	left: 0;
}
#gdrawer nav>ul>li {
	display: block;
	text-align: center;
}
#gdrawer nav>ul>li>a {
	padding: 10px 0;
	display: inline-block;
	height: auto;
	line-height: 1;
	margin-right: 0 !important;
	color: #fff !important;
}

#gdrawer nav>ul>li:nth-of-type(3)>a::before { right: -20px; }
#gdrawer nav>ul>li:nth-of-type(3)>a::after { right: -20px; }


#gdrawer nav>ul>li:nth-of-type(3)>ul {
	position: relative;
	top: 0;
	margin: 0 auto;
	border: 0 !important;
}
#gdrawer nav>ul>li:nth-of-type(3)>ul>li>a {
	color: #fff;
	border: 0 !important;
}

.c-contact {
	padding: 50px;
}

.c-contact h2 { font-size: 20px; }

/* ---------------------------------
*    Top
*/

.top section { padding: 50px 0; }

.top section header {
	margin-bottom: 10px;
}

.top section h1 {
	font-size: 30px;
}

.top section .more a { font-size: 20px; }

.top .news .flex article {
	width: 50%;
	margin-bottom: .1%;
}

.post-list article {
	width: 50%;
	margin-bottom: .1%;
}
.post-list article .thumbnail { height: auto; }
.post-list article .desc {
	padding: 10px;
}

.post-list article .desc h2 { line-height: 1.5; }

.post-list article .info { margin-bottom: 5px; }

.post-list article .info time {
	font-size: 11px;
	height: 20px;
	line-height: 20px;
}

.post-list article .info .category {
	font-size: 11px;
	padding: 0 7px;
	height: 20px;
	line-height: 20px;
}

.post-list article h3 {
	line-height: 1.5;
	font-size: 14px;
}

.top .service ul li {
	height: auto;
	min-height: auto;
}

.top .service ul li .img,
.top .service ul li .desc {
	float: none;
	clear: both;
	width: 100%;
	height: auto;
}

.top .service ul li img {
	width: 100%;
}

.top .service ul li .desc {
	padding: 30px 20px;
}

.top .service ul li .desc h3 {
	font-size: 30px;
	margin-bottom: 20px;
}

.top .service ul li .desc p {
	font-size: 14px;
	line-height: 1.8;
	height: auto;
	margin-top: 0;
}

.top .service ul li .desc span {
	margin-top: 15px;
}

.top .service>ul>li .desc h2 {
	font-size: 25px;
	margin-bottom: 0;
}
.top .service>ul>li .desc div {
	font-size: 15px;
	height: auto;
}

.top .client .desc {
	font-size: 14px;
	padding: 0 20px;
}

.top .instagram ul {
	width: 90%;
}

/* ---------------------------------
*    Page
*/

#category, #service, .page { padding: 30px 0; }
#category h1, #service h1, .page h1 {
	font-size: 30px;
	margin-bottom: 30px;
}

/*About*/

.page .about {
	width: 94%;
	padding: 0 3%;
}

.page .about ul li {
	font-size: 14px;
	margin-bottom: 10px;
}

/*News*/

/* ---------------------------------
*    Single
*/

#nav-below { margin: 30px 0 0; }
#nav-below .previous { margin-bottom: 10px; }

}

@media( max-width:320px ){ 
	#mainLogo { left: 5px; }
	#gdrawer-btn {
		right: 0;
		width: 40px;
	}
	#gdrawer-btn span { width: 26px; margin-left: -13px; }
}

/* Retina Display ----------- */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
}