@charset "utf-8";

/*
Theme Name:GRAFFIZZ_ORIGINAL2024
*/

/*
Noto Sans CJK JP

水色①：#3bc3e8
水色②：#57d1ff
グレー①：#f2f2f2
*/



/* =Global Elements
-------------------------------------------------------------- */

/* Main global 'theme' and typographic styles */
html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 14pt;
  font-size: 1em;
}

body {
    height: 100%;
    background: #fff;
}

#colorbox{
    /*border:  solid blue 1px*/
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea {
background: #f9f9f9;
border: 1px solid #ccc;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
padding: 2px;
}

a{color:#000;text-decoration:none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
a:link {color:#000;}
a:visited {color: #000;}
a:active,a:hover {color: #02b6eb;text-decoration:underline;text-underline-offset: 0.5em;}

a img:hover{
opacity: 0.6;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute !important;
height: 1px;
width: 1px;
}

.dm-sans{
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

.forpc{
    display: block;
}

.forsp{
    display: none;
}


/* ローディング背景画面設定------------------------------------　*/
#splash {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background:#c4b8a0;
    text-align:center;
    color:#fff;
}


.sample {
	position:relative;
	overflow:hidden;
	margin:0 auto;
	width:100%;
	height:100%;
	background-color:#c4b8a0;
}

.sample::before,
.sample::after {
		position:absolute;
		left:-50%;
		width:200%;
		height:200%;
		content:"";
		background-color:#57d1ff;
		animation:wave linear 5s infinite;
	}

	.sample::before {
		top:-180%;
		border-radius:50% 50% / 50% 70%;
	}

	.sample::after {
		top:-176%;
		border-radius:30% 70% / 30% 50%;
		opacity:0.4;
		animation-delay:0.4s;
	}

@keyframes wave {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}


/* ローディング画像　*/
#splash_logo {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -70%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
    width: 80%;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}




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

article#header {
    width:100%;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 20px;
}

article#header section{
    align-self: center;
}

div#branding{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

div#branding p{
    align-self: center;
    font-size: 1.25em;
    font-weight: bold;
}

div#branding p:nth-of-type(1){
    margin-right: 1em;
}

article#header #branding img{
    width: 94px;
    height: auto;
}

a#mainLogo{
    display: block;
}

a#mainLogo:hover{
    text-decoration: none;
}
a#mainLogo:hover img{
    opacity: 0.6;
    transition: 0.3s;
}


/* =Menu
-------------------------------------------------------------- */
#access {
    margin: 0 auto;
    text-align: right;
    height: 65px;
}

.global-nav-wrapper .global-nav {
    font-size: 14px;
    list-style: none;
    height: 65px;
    line-height: 65px;
}

.global-nav-wrapper .global-nav li{
    display: inline-block;
    padding-left: 1em;
    padding-right: 1em;
}

.sub-menu{
    text-indent: 0px;
}

#access .global-nav > li > a {
    color: #000;
    display: block;
    line-height:65px;
    padding: 0;
    text-decoration: none;
    height: 65px;
}

#access ul ul {
    display: none;
    position: absolute;
    top: 90px;
    left: 20%;
    z-index: 99999;
    background-color: rgba(242,242,242,.8);
    border: solid 1px #f2f2f2;
    border-radius: 10px;
    padding: 1em 0;
    text-align: center;
    transition: .5s
}

#access ul ul li {
    margin-bottom:3px;
    width: 20%;
    height: auto;
    padding: 0;
    margin: 1%;
    background-color: #fff
}

#access ul ul li img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

#access ul ul ul {
    left: 100%;
    top: 0;
}

#access li:hover > a,
#access ul ul :hover > a {
    color: #3bc3e8;
}

#access ul li:hover > ul {
    display: block;
}

#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #3bc3e8;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.5em;
}

* html #access ul li.current_page_item a,
* html #access ul li.current_page_ancestor a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
    color: #fff;
}


/*お問合せボタン*/

li#menu-item-597{;
}

li#menu-item-597 a{
    display: block;
    background-image: url("img/contactbt@2x.png");
    background-repeat: no-repeat;
    background-size: 65px;
    width: 65px;
    font-size: 0;
    }

li#menu-item-597 a:hover{
    background-image: url("img/contactbth@2x.png");
}


/*ハンバーガーメニュー-----------------------*/
/*
/* チェックボックスを非表示 */
.drawer-hidden {
	display: none;
}  

/* ハンバーガーアイコン外枠 */
.drawer-open {
	display: flex;
	height: 2.5rem;
	width: 2.5rem;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 30px;
	right: .5rem;
	color: #57d1ff;
	border-radius: 4px;
	z-index: 100;
	cursor: pointer;
    border:  solid #57d1ff 1px
}

/* 初期状態のアイコン(menu) */
.drawer-open span:before {
	content: '\e5d2';
	font-family: 'Material Icons';
	font-size: 2rem;
	display: inline-block;
}

/* アイコンがクリックされたら初期アイコンを非表示 */
#drawer-check:checked ~ .drawer-open span::before {
	display:none;
}

/* アイコンがクリックされたら「閉じる」アイコンを表示 */
#drawer-check:checked ~ .drawer-open span::after {
	font-family: 'Material Icons';
	content: '\e5cd';
	font-size: 2rem;
	display: inline-block;	  
	transition: 0.5s;    
}

/* メニュー(非表示中)*/
.drawer-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%;
	z-index: 50;
	background: rgba(59,195,232,.9);
	transition: 0.5s;
	margin: 0;
	padding: 5rem 0 0 2rem;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
	left: 20%;
}

/* メニューの装飾 */
ul.drawer-list  {
	list-style-type: none;
}

.drawer-list li {
	padding: 10px;
	border-bottom: 1px solid #f2f2f2;
	font-size: .75em;
	text-align: left;
	transition: 0.3s ease;
}

.drawer-list li li{
	font-size: 1em;
    border-bottom: none;
}

.drawer-list li a {
	color: #000;
}

.drawer-list li:before {
	color: #fff;
	padding-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
}

.hamburger-menu li:hover {
	transform: translateX(5px);
}


/* =Common
-------------------------------------------------------------- */
.mv{
    width: 100vw;
    min-width: 1160px;
    height: 540px;
    margin: 20px auto 80px;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.mv section{
    align-self: center;
}

.mv section:nth-of-type(1){
    width: 20vw;
    height: 540px;
    position: relative;
    background-color: rgba(255,255,255,0);
    top: 0;
    left: 0;
    z-index: 4;
}

.mv section:nth-of-type(1)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30vw;
  height: 100%;
  z-index: -1;
  background-color: #f2f2f2;
transform: skewX( -20deg ) /*translateX(8vw)*/;
  transform-origin: top left;
}

#metaslider-id-641,#metaslider_container_641,#metaslider_container_641 .slides,#metaslider_container_641 .slides img{
    height: 100% !important;
}

.mv section:nth-of-type(2){
    width: 200vw;
    height: 540px;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0vw;
}

.mv h1{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 3rem;
    font-weight: 900;
    font-style: italic;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.mv span:nth-of-type(1){
    color: #000;
    display: block;
    text-align: left;
/*    transform:translateX( -2% );*/
}

.mv span:nth-of-type(2){
    color: #57d1ff;
    display: block;
    text-align: left;
/*    transform: translateX(7%);*/
}

.mv span:nth-of-type(3){
    color: #57d1ff;
    display: block;
    text-align: left;
/*    transform: translateX(20%);*/    
}

.mv span:nth-of-type(4){
    color: #000;
    display: block;
    text-align: left;
    /*transform: translateX(25%);*/
}

.titlewrap img{
    height: 270px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}




.titlewrap{
    width: 100vw;
    min-width: 1160px;
    height: 270px;
    margin: 20px auto 80px;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
}

.titlewrap section{
    align-self: center;
}

.titlewrap section:nth-of-type(1){
    width: 30vw;
    height: 270px;
    position: relative;
    background-color: #f2f2f2;
    transform: skew( -20deg ) translateX(5vw);
    display: flex;
}


.titlewrap section:nth-of-type(2){
    width: 70vw;
}

.titlewrap h1{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 2.8em;
    font-weight: 700;
	letter-spacing:.05em;
    padding: 0;
    vertical-align: middle;
    align-self: center;
    font-style: italic;
    /*transform: translateX( 20% )*/
}

.titlewrap span:nth-of-type(1){
    color: #000;
    display: block;
    transform: skew( 20deg ) translateX(-5%);
    text-align: left
}

.titlewrap span:nth-of-type(2){
    color: #57d1ff;
    display: block;
    transform: skew( 20deg ) translateX(0%);
    text-align: left

}

.titlewrap img{
    height: 270px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}


.na{
    /*outline: solid blue 1px;*/
}

.tit2nd{
    font-size: 1.684em;
    font-weight: bold;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto 40px;
}

.tit2nd span{
    display: block;
    color: #57d1ff;
    font-size: 0.594em;
}

.diagonalline{
    height: 12px;
    width: 200%;
    margin: 80px 0 0 -50%;
    background:repeating-linear-gradient(-45deg,#57d1ff 0,#57d1ff 1px,#fff 0,#fff 8px,#57d1ff 9px,#57d1ff 0);
}


/* =Content
-------------------------------------------------------------- */

#main {
    clear: both;
    padding: 0;
}

#content,
#content input,
#content textarea,
#content_2clumn {
    color: #000;
    font-size: 14px;
    line-height: 24px;
}

#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr,
#content_2clumn p,
#content_2clumn ul,
#content_2clumn ol,
#content_2clumn dd,
#content_2clumn pre,
#content_2clumn hr {
margin-bottom: 0;
}

#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul,
#content_2clumn ul ul,
#content_2clumn ol ol,
#content_2clumn ul ol,
#content_2clumn ol ul {
margin-bottom: 0;
}
#content pre,
#content kbd,
#content tt,
#content var {
font-size: 15px;
line-height: 21px;
}
#content code {
font-size: 13px;
}
#content dt,
#content th {
color: #000;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content_2clumn h1,
#content_2clumn h2,
#content_2clumn h3,
#content_2clumn h4,
#content_2clumn h5,
#content_2clumn h6 {
color: #000;
}

.hentry {
margin: 0 0 48px 0;
}
.home .sticky {
background: #f2f7fc;
border-top: 4px solid #000;
margin-left: -20px;
margin-right: -20px;
padding: 18px 20px;
}
.single .hentry {
margin: 0 0 36px 0;
}


/*各ページタイトル*/
.pagetit{
    width: 100%;
    max-width: 1160px;
    color: #000;
    font-size: 1.714em;
    font-weight: bold;
    margin: 0 auto 30px;
}

.child .pagetit{
    width: 100%;
    max-width: 1160px;
    font-size: 1.714em;
    font-weight: bold;
    margin: 0 auto .5em;
}

.pagetit span{
    display: block;
    color: #57d1ff;
    font-size: 0.583em;
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight:800;
    font-style: normal;
}

.woodtit{
    font-size: 1.429em;
    margin-bottom: 20px;
}

.woodtit span{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 0.5em;
    color: #57d1ff;
}

.page-title {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 36px 0;
}
.page-title span {
    color: #000;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
}
.page-title a:link,
.page-title a:visited {
    color: #000;
    text-decoration: none;
}
.page-title a:active,
.page-title a:hover {
    color: #ff4b33;
}
#content .entry-title {
    color: #000;
    letter-spacing:0.05em;
    height:44px;
    line-height:44px;
    font-size:24px;
    margin: 0 0 20px;
}

.archive-title:hover{
text-decoration:underline;
}

.entry-title a:link,
.entry-title a:visited {
color: #000;
text-decoration: none;
}
.entry-title a:active,
.entry-title a:hover {
color: #ff4b33;
}
.entry-meta {
    color: #000;
    font-size: 1em;
}
.entry-meta abbr,
.entry-utility abbr {
    border: none;
}
.entry-meta abbr:hover,
.entry-utility abbr:hover {
    border-bottom: 1px dotted #666;
}
.entry-content,
.entry-summary {
    clear: both;
    padding: 0px 0 0 0;
    line-height:2em;
}
.entry-summary {
    font-size:12px;
}

.entry-content .more-link {
    white-space: nowrap;
}
#content .entry-summary p:last-child {
    margin-bottom: 12px;
}
.entry-content fieldset {
    border: 1px solid #e7e7e7;
    margin: 0 0 24px 0;
    padding: 24px;
}
.entry-content fieldset legend {
background: #fff;
color: #000;
font-weight: bold;
padding: 0 24px;
}
.entry-content input {
margin: 0 0 24px 0;
}
.entry-content input.file,
.entry-content input.button {
margin-right: 24px;
}
.entry-content label {
color: #777;
font-size: 12px;
}
.entry-content select {
margin: 0 0 24px 0;
}
.entry-content sup,
.entry-content sub {
font-size: 10px;
}
.entry-content blockquote.left {
float: left;
margin-left: 0;
margin-right: 24px;
text-align: right;
width: 33%;
}
.entry-content blockquote.right {
float: right;
margin-left: 24px;
margin-right: 0;
text-align: left;
width: 33%;
}
.page-link {
clear: both;
color: #000;
font-weight: bold;
line-height: 48px;
word-spacing: 0.5em;
}
.page-link a:link,
.page-link a:visited {
background: #f1f1f1;
color: #333;
font-weight: normal;
padding: 0.5em 0.75em;
text-decoration: none;
}
.home .sticky .page-link a {
background: #d9e8f7;
}
.page-link a:active,
.page-link a:hover {
color: #ff4b33;
}
body.page .edit-link {
clear: both;
display: block;
}
#entry-author-info {
background: #f2f7fc;
border-top: 4px solid #000;
clear: both;
font-size: 14px;
line-height: 20px;
margin: 24px 0;
overflow: hidden;
padding: 18px 20px;
}
#entry-author-info #author-avatar {
background: #fff;
border: 1px solid #e7e7e7;
float: left;
height: 60px;
margin: 0 -104px 0 0;
padding: 11px;
}
#entry-author-info #author-description {
float: left;
margin: 0 0 0 104px;
}
#entry-author-info h2 {
color: #000;
font-size: 100%;
font-weight: bold;
margin-bottom: 0;
}
.entry-utility {
clear: both;
color: #777;
font-size: 12px;
line-height: 18px;
}
.entry-meta a,
.entry-utility a {
color: #777;
}
.entry-meta a:hover,
.entry-utility a:hover {
color: #ff4b33;
}
#content .video-player {
padding: 0;
}
.format-standard .wp-video,
.format-standard .wp-audio-shortcode,
.format-audio .wp-audio-shortcode,
.format-standard .video-player {
margin-bottom: 24px;
}

/* =Asides
-------------------------------------------------------------- */

.home #content .format-aside p,
.home #content .category-asides p {
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
margin-top: 0;
}
.home .hentry.format-aside,
.home .hentry.category-asides {
padding: 0;
}
.home #content .format-aside .entry-content,
.home #content .category-asides .entry-content {
padding-top: 0;
}


/* =Gallery listing
-------------------------------------------------------------- */

.format-gallery .size-thumbnail img,
.category-gallery .size-thumbnail img {
border: 10px solid #f1f1f1;
margin-bottom: 0;
}
.format-gallery .gallery-thumb,
.category-gallery .gallery-thumb {
float: left;
margin-right: 20px;
margin-top: -4px;
}
.home #content .format-gallery .entry-utility,
.home #content .category-gallery .entry-utility {
padding-top: 4px;
}


/* =Attachment pages
-------------------------------------------------------------- */

.attachment .entry-content .entry-caption {
font-size: 140%;
margin-top: 24px;
}
.attachment .entry-content .nav-previous a:before {
content: '\2190\00a0';
}
.attachment .entry-content .nav-next a:after {
content: '\00a0\2192';
}


/* =Images
-------------------------------------------------------------- */

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright,
img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 12px;
}
.wp-caption {
background: #f1f1f1;
line-height: 18px;
margin-bottom: 20px;
max-width: 632px !important; /* prevent too-wide images from breaking layout */
padding: 4px;
text-align: center;
}
.wp-caption img {
margin: 5px 5px 0;
max-width: 622px; /* caption width - 10px */
}
.wp-caption p.wp-caption-text {
color: #777;
font-size: 12px;
margin: 5px;
}
.wp-smiley {
margin: 0;
}
.gallery {
margin: 0 auto 18px;
}
.gallery .gallery-item {
float: left;
margin-top: 0;
text-align: center;
width: 33%;
}
.gallery-columns-2 .gallery-item {
width: 50%;
}
.gallery-columns-4 .gallery-item {
width: 25%;
}
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-columns-2 .attachment-medium {
max-width: 92%;
height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
max-width: 84%;
height: auto;
}
.gallery .gallery-caption {
color: #777;
font-size: 12px;
margin: 0 0 12px;
}
.gallery dl {
margin: 0;
}
.gallery img {
border: 10px solid #f1f1f1;
}
.gallery br+br {
display: none;
}
#content .attachment img {/* single attachment images should be centered */
display: block;
margin: 0 auto;
}


/* =Navigation　ページ送り
-------------------------------------------------------------- */

.navigation {
    padding-top: 40px;
    color: #000;
    font-size: 1em;
    line-height: 18px;
    overflow: hidden;
    display: flex;
    justify-content: space-around
}

.navigation a:link,
.navigation a:visited {
    color: #000;
    text-decoration: none;
}

.navigation a:active,
.navigation a:hover {
    color: #57d1ff;
}

.nav-previous {
    width: 50%;
    padding-right: 5%;
}

.nav-next {
    text-align: right;
    width: 50%;
    padding-right: 5%;
}

#nav-above {
    margin: 0 0 18px 0;
}

#nav-above {
    display: none;
}

.paged #nav-above,
.single #nav-above {
    display: block;
}

#nav-below {
    margin: -18px 0 0 0;
}



/* =Widget Areas　ウィジェット
-------------------------------------------------------------- */

#mainsection{
}

#primary{
    margin-top: 25px;
}

.entry-content{
}

h3.widget-title{
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: .5em;
    margin-bottom: 1em;
    border-bottom: solid 2px #57d1ff;
}

h3.widget-title span{
    display: inline-block;
    font-size: .714em;
    margin-left: 1em;
    color: #57d1ff
}


/* Main sidebars */
#main .widget-area ul {
    margin-left: 0;
    padding: 0;
    margin-bottom: 50px;
}

#main .widget-area ul li.blogli{
    margin-bottom:.5em;
    line-height: 1.75em;
    font-size: 0.857em;
}

li.blogli span{
    display: block;
    font-size: 0.833em;
    line-height: 1em;
}

#main .widget-area ul li.blogli a:hover{
    text-decoration: none;
}

#main .widget-area ul ul {
    border: none;
    margin-left: 1em;
    padding: 0;
}

select#alist{
    width: calc(100% - 1.333em);
    margin-left: 1.333em;
    padding: .5rem;
    border:  solid #ccc 2px;
    border-radius: 10px;
    font-size: .75em;
}


/*-------------------------------------------------------------
スライドイン
--------------------------------------------------------------*/
#container{
	overflow: hidden;
}
.slidein{
	margin: 80px auto;
	transition: .5s cubic-bezier(0.25,0.46,0.45,0.94);
    /*1s cubic-bezier(0.75, 0, 0.25, 1);*/
}

.slide_left{
	transform: translateX(calc(-50vw - 50%));
}

.slide_right{
	transform: translateX(calc(50vw + 50%));
}

.show{
	transform: translateX(0);
}

/* =Footer
-------------------------------------------------------------- */
#footer {
    clear:both;
    width:100%;
    padding:0;
    margin: 40px auto 0;
}

#menu-fnav2{
    width: auto;
    margin: 0 auto;
    text-align: center;
    font-size: 0.875em;
}

#menu-fnav2 a{
    
}

#menu-fnav2 li{
    display: inline-block;
}

#menu-fnav2 li:after{
    content:"　|　"
}

#menu-fnav2 li:nth-of-type(7):after{
    content: none;
}

#footer #site-info {
    padding: 100px 0;
    background-color:#f2f2f2;
}

#foottable{
    width: auto;
    margin: 40px auto 0;
    font-size: 0.875em;
}

#foottable td{
    padding: .25em 1em;
    vertical-align: middle;
}

#foottable img{
    width: 80px;
    height: auto;
}

p#copy{
    text-align:center;
    font-size: 14px;
    font-size: 0.875em;
}

#copywrap{
    background-color:#3bc3e8;
    color:#fff;
    display:flex;
    justify-content: space-around;
    padding: 40px 5%;
}

#footnav{
    text-align:center;
    padding:0;
    font-size: 13px;
    font-size: 0.813em;
}

#footnav a{
    color:#fff;
}

#footnav li{
    display: inline-block;
}

#footnav li:nth-of-type(2):before{
    content:"　|　"
}

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */
pre {-webkit-text-size-adjust: 100%;}
code {-webkit-text-size-adjust: 100%;}
#access,.entry-meta,.entry-utility,.navigation,.widget-area {-webkit-text-size-adjust: 100%;}
#site-description {-webkit-text-size-adjust: none;}
#footer{-webkit-text-size-adjust: 100%;}

/* *****************************************************************
* COMMON
* ***************************************************************** */

.fl{float:left;}
.fr{float:right;}
.cl{clear:both !important;}

.ar{text-align: right;}

.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:80px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}

.red{ border: solid red 1px;}




/* *****************************************************************
* TOPPAGE
* ***************************************************************** */

.homePage{
    width: 100%;
}

.topcontent{
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

#probt ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#probt ul li{
    width: 24.5%;
    height: auto;
    margin-bottom: .5%;
    position: relative;    
}

#probt ul li img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.switch_image {
    position: relative;
    display: block;
}

.switch_image img {
    transition: 0.7s;
}

.switch_image img:first-of-type{
    position: relative;
    top: 0;
    left: 0;
}

.switch_image:hover img:first-of-type {
    opacity: 0;
}

.switch_image img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.switch_image:hover img:last-of-type {
    opacity: 1;
}

dl.newsline{
    border-top: solid 1px #57d1ff;
}

dl.newsline a {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: url("img/top/arrow@2x.png") no-repeat right center;
    background-size: 28px;
}

dt.newsday {
    width: 10em;
    border-bottom: solid 1px #57d1ff;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    font-weight: normal;
}

dd.newstit {
    width: calc(100% - 10em);
    border-bottom: solid 1px #57d1ff;
    padding-top: 1.25em;
    padding-bottom: 1.25em;    
}

dl.newsline a:hover{
    text-decoration: none;
    background: url("img/top/arrow@2x.png") no-repeat right center;
    background-size: 28px;
}

dl.newsline a:hover dt{
    text-decoration: none;
    color: #02b6eb !important;
    transition: 0.5s;
}

#navul ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#navul ul li{
    width: 24.5%;
    height: auto;
    text-align: center;
    background-color: #f2f2f2;

}

#navul ul li a{
    display: block;
    width: 100%;
    color: #000;
    padding: 2em 0;
    font-size: 1.286em;
    background-image: url("img/top/arrow2@2x.png");
    background-repeat: no-repeat;
    background-position: bottom 50% right 8px;
    background-size: 27px;    
}

#navul ul li a:hover{
    background-color: #57d1ff;
    background-image: url("img/top/arrow2@2x.png");
    background-repeat: no-repeat;
    background-position: bottom 50% right 8px;
    background-size: 27px;
    text-decoration: none;
    color: #fff;
}


/* *****************************************************************
* NEWS　お知らせ　シングルページ
* ***************************************************************** */

#blogwrap{
    width: 100%;
    max-width: 1160px;
    margin: 80px auto 0;
    display: flex;
    flex-wrap: wrap;
}

#blogwrap section#mainsection{
    width: 75%;
}

#blogwrap section#sidewrap{
    width: 25%
}


#content_2clumn .entry-title {
    font-size: 1.429em;
    font-weight: bold;
    margin-bottom: 40px;
}

#content_2clumn .archive-title{

}

#content_2clumn .entry-title a{

}

#content_2clumn p{

}

p.nocomments{
    display: none;
}

/* *****************************************************************
* WORKS　私たちの仕事とは
* ***************************************************************** */
#masterplan ul{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

#masterplan ul li{
    width: 19%;
    margin-right: 1%;
}

#masterplan ul li img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

#characteristics div#oyawrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#characteristics section{
    width: 30%;

}

#characteristics section:nth-of-type(1),
#characteristics section:nth-of-type(2),
#characteristics section:nth-of-type(3){
	    margin-bottom: 4%;
}

#characteristics section figure{
    text-align: center;
}

#characteristics section figure img{
    width: auto;
    height: 80px;
}

#characteristics section h2{
    font-size: 1.143em;
    font-weight: bold;
    margin:.5em auto 1em;
    text-align: center;
}


/* *****************************************************************
* PERFORMANCE
* ***************************************************************** */

#hover06 {
    width:100%;
    max-width:1160px;
    margin:0 auto;
    padding:0;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

#hover06 div {
    position: relative;
    width: 23.5%;
    height: auto;
    margin-bottom: 2%;
    box-sizing: border-box;
    aspect-ratio: 5 / 3;
}

#hover06 div:first-child {
    margin-left: 0;
}

#hover06 div figcaption span {
    display: block;
}


#hover06 figure img{
    width:100%;
    height:auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

#hover06 figure:hover+span {
bottom: -18px;
opacity: 1;
}

#hover06 figure img {
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

#hover06 figure:hover img {
}

/*Pagenation*/
.pagenation {
    margin: 1em auto 0;
    text-align:center;
    overflow: hidden;
    position: relative;
}

.pagenation:after, .pagenation ul:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.pagenation ul {
margin: 0 auto;
text-align:center;
position: relative;
left:43%;
}
.pagenation li {
float: left;
list-style: none outside none;
margin-left: 3px;
}
.pagenation li:first-child {
margin-left: 0;
}
.pagenation li.active {
background-color: #999999;
border-radius: 3px;
color: #FFFFFF;
cursor: not-allowed;
padding: 5px 10px;
}
.pagenation li a {
background: none repeat scroll 0 0 #CCCCCC;
border-radius: 3px;
color: #FFFFFF;
display: block;
padding: 5px 10px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
background-color: #444444;
color: #FFFFFF;
opacity: 0.8;
transition-duration: 500ms;
transition-property: all;
transition-timing-function: ease;
}


/* *****************************************************************
* PRODUCTS　取扱製品
* ***************************************************************** */
#rideice01{
    
}

.bigContent{
    width:  100%;
    height: auto;
    margin-bottom: 80px;
    position:relative;
}

.bigContent section#productMv{
    width:  100%;
    margin-bottom: 80px;
    height: 420px;
    position:relative;
    background: url("img/products/bgsquare.png");
}

.parent{
    height: 420px;

}

.parent img{
    position:absolute;
    top:0;
    left:0;
    width: 56%;
    height: 420px;
    object-fit: cover;
}

.child{
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right:0;
    width:58%;
    padding: 1.5% 3%;
    background-color: #fff;
}

.itemlist{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.itemlistDiv{
    width: 24%;
    margin-bottom: 1%;
}

.itemlistDiv img{
    width: 100%;
    object-fit: cover;
}

.imagewrap2{
    margin-top: calc(80px - 2%)
}

#btwrap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: calc( 60px - 2% );
}

#btwrap p{
    width: 49%;
    text-align: center;
    font-size: 1.143em;
}

#btwrap p a{
    display: block;
    width: 100%;
    border: solid #57d1ff 2px;
    background-color: #57d1ff;
    background-image: url("img/pdf.png");
    background-repeat:  no-repeat;
    background-position: 25% center;
    background-size: 6%;
    border-radius: 10px;
    padding: 1em 0;
}

#btwrap p a:hover,#btwrap2 p a:hover{
    border: solid #3bc3e8 2px;
    background-color: #fff;
    text-decoration: none;
}

.watertoyspage #btwrap p{
    margin-bottom: 2%;
}

#btwrap2{
    width: 100%;
    margin: calc(80px - 2%) auto 0;
}

#btwrap2 p{
    width: 100%;
    text-align: center;
    font-size: 1.143em;
    margin-bottom: 2%;
}

#btwrap2 p a{
    display: block;
    width: 100%;
    border: solid #57d1ff 2px;
    background-color: #57d1ff;
    background-image: url("img/pdf.png");
    background-repeat:  no-repeat;
    background-position: 24% center;
    background-size: 3%;
    border-radius: 10px;
    padding: 1em 0;}
    
#btwrap2 p a img{    
    margin-right: auto;
    margin-left: auto;
}

#partnerMap{
    margin: calc(80px - 2%) auto 0;
}

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

/*ウォータースライダー*/
.smallContent{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.smallContent h1{
    font-size: 1.429em;
    font-weight: bold;
    margin-bottom: 20px;
}

.smallContent h1 span{
    font-size: 0.5em;
    margin-left: 20px;
    color: #57d1ff;
}

.smallContent div:nth-of-type(1){
    width: 65%;
    padding: 0 5% 0 0;
    align-self: center;
}

.smallContent div:nth-of-type(2){
    width: 35%;
}

.smallContent div:nth-of-type(2) figure img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

#chakusuiwrapdiv{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#chakusuiwrap section{
    width: 50%;
}

#chakusuiwrap section div h1{
    font-weight: bold;
    font-size: 1.286em;
}

#chakusuiwrap section div p{
    margin-top: 10px;
    margin-bottom: 30px;
    padding-left: 0%;
    padding-right: 5%
}

#chakusuiwrap section div figure:nth-of-type(1){
    text-align: left;
    height: 300px;
	margin-bottom:20px;
}


#chakusuiwrap section div figure:nth-of-type(2) img{
	width: 90%;
	
}

#chakusuiwrap figure figcaption{
    text-align: left;
    font-weight: bold;
}

#chakusuiwrap figure figcaption span{
    display: inline-block;
    font-size: 0.643em;
    color: #57d1ff;
    margin-left: 10px;
}

/* *****************************************************************
* ABOUT US
* ***************************************************************** */
article#gaiyowrap{
    width: 100%;
    max-width:1240px;
    margin: 0 auto 80px;
}

table#gaiyo {
    width: 100%;
    max-width:1160px;
    margin: 0 auto;
    border:  solid #ccc 1px;
}

table#gaiyo th{
    padding: 1.5em;
    border-bottom: solid #ccc 1px;
    border-right: solid #ccc 1px;
    font-weight: normal;
    font-size: 1em;
}

table#gaiyo td{
    padding: 1.5em 1em 1.5em 2em;
    border-bottom: solid #ccc 1px;
}

article#partner{
    width: 100%;
    max-width:1160px;
    margin: 0 auto;
}

div#partnerwrap section{
    padding-bottom: 40px;
}

article#partner section:nth-of-type(1){
    text-align: center;
}


article#partner section:nth-of-type(1) h2{
    text-align: left;
}

article#partner section:nth-of-type(1) figure img{
    width: 100%;
    max-width: 300px;
    height: auto;
}

article#partner section:nth-of-type(2) div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

article#partner section:nth-of-type(3) div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;    
    text-align: center;
    width: 50%;
    margin: 0 auto;
}

article#partner section:nth-of-type(2) figure{
    width: 20%;
    align-self: center;
}

article#partner section:nth-of-type(3) figure{
    width: 50%;
    align-self: center;    
}

article#partner section:nth-of-type(2) figure img{
    width: 80%;
    max-width: 150px;
    height: auto;
}

article#partner section:nth-of-type(3) figure img{
    width: 100%;
    max-width: 180px;
    height: auto;
}

article#partner h2{
    font-size: 1.158em;
    margin-bottom: 15px;
}

.aboutdiv figure{
    /*float: left;
    width: 90px;*/
}

.aboutdiv figure img{
    
}

.aboutdiv div{
    /*float: right;
    width: calc(100% - 90px);*/
}

.aboutdiv dt {
    /*float:left;
    clear:both;
    font-weight: normal;
    width: 6em;*/
}

.aboutdiv dd {
    /*float:left;
    width: calc(100% - 6em);*/
}

.aboutdiv dd + dd{
    /*margin-left:70px;
    line-height:1.5em !important;*/
}

#mapwrap{
text-align: center;
margin: 0 auto;
}

#mapwrap img{
    width: 100%;
	max-width:650px;
    height: auto;
}

p#backpage{
text-align: center;
width: 50%;
margin:50px auto 0;
}

p#backpage a {
background: none repeat scroll 0 0 #CCCCCC;
border-radius: 3px;
color: #FFFFFF;
display: block;
padding:10px 20px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
p#backpage a:hover {
background-color: #444444;
color: #FFFFFF;
opacity: 0.8;
transition-duration: 500ms;
transition-property: all;
transition-timing-function: ease;
}


/* *****************************************************************
* FAQ
* ***************************************************************** */
.faqpage{
}

.faqpage #content{
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

.faqarticle{
    margin-top: 40px;
}

/* FAQパーツ */
.qa__box {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.qa__box:nth-of-type(odd){
    border: solid #f2efed 2px;
    border-radius: 10px;
    background-color: #f2efed
}

.qa__box:nth-of-type(even){
    border: solid #f2efed 2px;
    border-radius: 10px;
    background-color: #fff;
}  

.pageSubTitle2 {
    font-size: 1.286em;
    line-height: 1.7;
    font-weight: 400;
    font-style: normal;
    color: #ff3964;
  }

.contentText {
    font-size: 1em;
    line-height: 1.7;
    font-weight: 400;
    font-style: normal;
    color: #302a28;
  }

.qa {
    padding-top: 180px;
    padding-bottom: 278px;
  }

.qa__box > dl > dt {
    /*background-color: #fff;*/
    display: flex;
    align-items: center;
    padding: 10px 13% 10px 8%;
    position: relative;
    cursor: pointer;
  }

.qa__box > dl > dt .crossBar {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    background-color: #57d2ff;
    border: solid #57d2ff 1px;
    border-radius: 50%;
  }

.qa__box > dl > dt .crossBar::before {
    content: "";
    display: inline-block;
    width: 1.6px;
    height: 50%;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform-origin: center center; /* 中心を基準にtransform */
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  }

.qa__box > dl > dt .crossBar::after {
    content: "";
    display: inline-block;
    width: 50%;
    height: 1.6px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
  }

.qa__box > dl > dt > span {
    font-size: 30px;
    line-height: 1.75;
    font-weight: 500;
    color: #3b8bff;
    font-style: normal;
    margin-right: 10px;
  }

.qa__box > dl > dt.js-qa__parent > span { 
      color: #57d2ff;
}

.qa__box > dl > dd {
    margin: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    padding: 0px 30px; /* paddingの上下を0にする */
    max-height: 0; /* max-heightを0にする、レスポンシブ対応 */
    overflow: hidden;  /* overflow: hidden;を付けるのがポイント */
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  
  .qa__box:nth-of-type(odd) > dl > dd {
      background-color: transparent;
  }
  
  .qa__box > dl > dd > span {
    font-size: 2.143em;
    line-height: 1.7;
    font-weight: 500;
    font-style: normal;
    color: #ff6666;
    margin-right: 15px;
  }
  
  
  /* アニメーション後のスタイル */
  .qa__box > dl > dd.is-open { /* heightとpaddingをアニメーション */
    max-height: 260px;
    padding: 10px 13% 10px 8%;
  }
  /* ＋ボタンのアニメーション */
  .qa__box > dl > dt.is-open .crossBar::before {
    transform: translateX(-50%) rotate(90deg);  /* 90度回転 */
  }


/* *****************************************************************
* CONTACT
* ***************************************************************** */

.contactpage{
    overflow: hidden;
}

.contactpage #content{
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

#contactwrap{
   overflow: hidden;
}

#contactwrap h1{
    font-size: 1.429em;
}

p.tel{
    color: #57d2ff;
    font-size: 2.143em;
    vertical-align:middle;
    line-height:30px;
    margin-top: 40px;
    margin-bottom: 40px !important;
    font-weight: bold;
}

p.tel + p{
    font-size: 1.143em;
    font-weight: bold;
    padding-bottom:10px;
}


div#formwrap p{
    line-height:1.5em;
    margin: 0;
    padding:0;
}

div#contactform{
    margin-top:50px;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
    background:#fff;
    border:1px solid #ccc;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    padding:0px;
    width:80%;
}
textarea {
    height:7em;
    overflow:scroll-y;
    resize: none;
}


/*contact form7*/
.wpcf7 span.wpcf7-not-valid-tip {
    /*display: none;*/
}

.wpcf7 .wpcf7-not-valid {
    background: pink;
}
.wpcf7 .wpcf7-response-output {
    margin: 10px auto 0;
    padding: 8px 35px 8px 14px;
    text-shadow: 0 1px 0 rgba(0,0,0,0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    width: 80%;
}
.wpcf7 .wpcf7-validation-errors {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
    text-align: center;
}
.wpcf7 .wpcf7-mail-sent-ok {
    color: #3A87AD;
    background-color: #D9EDF7;
    border: 1px solid #BCE8F1;
    text-align: center;
}


p.sendbt .wpcf7-form-control {
    width: 60%;
    font-size: 1.4em;
    padding: 10px 30px;
    color: #fff !important;
    border-style: none;
    letter-spacing: 2em;
    text-indent: 2em;
    background: #ffa800;
    outline: none;
}

p.sendbt .wpcf7-form-control:hover {
opacity: 0.8;
}

table.mailform{
    width:100%;
    margin: 0 auto;
    border: none;
}

table.mailform input,
table.mailform textarea{
    margin-bottom: 15px;
    padding: 5px;
}

table.mailform tr:nth-child(odd){
    background:#f3f3f3;
}

table.mailform th{
    text-align:left;
    width: 25%;
    vertical-align: middle !important;
    color: #000 !important;
    padding: 10px!important;
    border: none !important;
}

table.mailform th span.hissu{
    background: #3bc3e8;
    color: #fff;
    padding: 2px 10px;
    font-size:10px;
    font-weight: normal;
    line-height: 1em;
    text-align: center;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    margin-left: 1em
}

table.mailform th span:nth-of-type(2){
    display: block;
    font-size: 0.85em;
    line-height: .85em;
    font-weight: normal;
}

table.mailform td{
    vertical-align: middle !important;
    padding: 10px 20px 10px 10px !important;
    border: none !important;
}

span.wpcf7-list-item {
    display: block;
}

#sendtd{
    text-align:center;
    padding: 15px 0 0 0 !important;
}

#mail_submit {
    color: #fff; 
    -webkit-border-radius: 4px;/* Google Chrome・Safari用 */
    -moz-border-radius: 4px;/* Firefox用 */
    border-radius: 4px;/* 基本形 */
    display: inline-block;
    font-size:20px !important;
    background: #e3e3e3;
    padding:10px 20px !important;
    text-align: center;
    border: solid 1px #888;
}

#mail_submit:hover{
    cursor:pointer;
    background: #02b6eb;
    color:#fff;
    border: solid #fff 1px;
}


/* *****************************************************************
*   Abouthissite,sitempa
* ***************************************************************** */

.textcontent{
    padding-top: 80px;
}

div#aboutthis h3{
margin: 20px 0 10px;
border-bottom: dotted 1px #e6e6e6;
padding-bottom:5px;
font-size:20px;
}

div#aboutthis h4.sitepolicy,
div#privacy h4.sitepolicy{
margin: 40px 0 10px;
font-weight:normal;
border-bottom: dotted 1px #e6e6e6;
padding-bottom:5px;
font-size:16px;
}

div#privacy p,
div#aboutthis p{
    font-size: 1em;
    text-indent:0em;
}

ul#sitemap{
width: 880px;
margin:0 auto 100px;
}

ul#sitemap li{
line-height:2em;
}

ol.prtitlelist{
margin-top:0px;
}
ol.prtitlelist li{
list-style: none !important;
background: none !important;
}
ol.prtitlelist li:before{
content:"− ︎";
}

div.articlewrap{
    width: 100%;
    max-width: 1160px;
    padding: 0 5%;
    margin:0 auto 100px;
}

/* *****************************************************************
*   404
* ***************************************************************** */
#btwrap p#error404{
    width: 50%;
    text-align: center;
    font-size: 1.143em;
    margin: 0 auto;
}

#btwrap p#error404 a{
    display: block;
    width: 100%;
    border: solid #57d1ff 2px;
    background-color: #57d1ff;
    background-image: none;
    border-radius: 10px;
    padding: 1em 0;
}
#btwrap p#error404 a:hover{
    border: solid #3bc3e8 2px;
    background-color: #fff;
    text-decoration: none;
}



@media screen  and (min-width: 1501px){
.mv{
    height: 720px;
}

.mv section:nth-of-type(1){
    height: 720px;
}

.mv section:nth-of-type(2){
    height: 720px;
}
}



@media screen  and (max-width: 1500px) and (min-width: 1281px){
.mv{
    height: 620px;
}

.mv section:nth-of-type(1){
    height: 620px;
}

.mv section:nth-of-type(2){
    height: 620px;
}
}


/*1280px以下で文字色が黄色に----------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) and (min-width: 1024px){
body {
/* 1280px以下で適用させたいcssを記述する部分 
    background-color: #F9D342;*/
    height: 100%;
    max-width: 100%;
    min-width: 1024px;
 }

article#header,.mv,.titlewrap,.pagetit{
    width: 100%;
    max-width:  100%
}

.tit2nd,.topcontent,#blogwrap,#hover06,table#gaiyo,article#partner,.faqpage #content,.contactpage #content,div.articlewrap{
    max-width: 100%;
}


div#content.workscontent,div#content{
    padding-left: 3%;
    padding-right: 3%;
}


.titlewrap{
    width: 100%;
    min-width: 1024px;
    background-color: #f2f2f2;
    position: relative;
}

.titlewrap section:nth-of-type(1){
    width: 30vw;
    background-color: #f2f2f2;
    transform: skew( -20deg ) translateX(0vw);
    position: absolute;
    z-index: 4;
}


.titlewrap h1 {
    font-size: 2.5rem;
    transform: translateX(1vw);
}


.titlewrap section:nth-of-type(2){
    width: 90vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.titlewrap img{
    object-fit: cover;
    object-position: left 25%;
}

#btwrap p a {
    background-position: 20% center;
}

#chakusuiwrap section div p {
    height: 5em;
}

#btwrap2 p a {
    background-position: 20% center;
 }

}/* end of max-width: 1280px */


/*1024px以下で背景色が青色に----------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
body {
/* 1024pxまでの幅の場合に適用される 
    background-color: #213C5F;*/
    height: 100%;
    max-width: 100%;
    min-width: 1000px;
 }

article#header,.mv,.titlewrap,.pagetit{
    width: 100%;
    max-width:  100%
}

.tit2nd,.topcontent,#blogwrap,#hover06,table#gaiyo,article#partner,.faqpage #content,.contactpage #content,div.articlewrap{
    max-width: 100%;
}


div#content.workscontent,div#content{
    padding-left: 3%;
    padding-right: 3%;
}

/*ファーストビュー-----------------------------------*/

.mv section:nth-of-type(1) {
    background: rgba(100,100,100,1);
    width: 10vw;
    transform: translateX(2vw);
}

.mv section:nth-of-type(1)::before {
  width: 35vw;
}

.mv h1 {
    left: 0%;
}

/*ページタイトル-------------------------------------*/
.titlewrap{
    width: 100%;
    min-width: 767px;
    background-color: #f2f2f2;
    position: relative;
}

.titlewrap section:nth-of-type(1){
    width: 35%;
    background-color: #f2f2f2;
    transform: skew( -20deg ) translateX( -3vw);
    position: absolute;
    z-index: 4;
}

.titlewrap section:nth-of-type(2){
    width: 90vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.titlewrap img{
    object-fit: cover;
    object-position: left 25%;
}

#btwrap p a {
    background-position: 15% center;
}

#chakusuiwrap section div h1 {
    height: 2.5em;
}

#chakusuiwrap section div p {
    height: 5em;
}

#chakusuiwrap section div figure {
    width: 90%;
    height: auto;
}

#chakusuiwrap section div figure img{
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0 auto;
}

#btwrap2 p a {
    background-size: 4%;
    background-position: 10% center;
 }




}/* end of max-width: 1024px ---------------------------------------------------------------------------------------------------------------*/


/*768px以下で背景色が赤色に----------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
body {
/* 768pxまでの幅の場合に適用される 
    background-color:#f10010;*/
    max-width: 768px;
    min-width: 100%;
    padding: 0 ;
}

article#header,.mv,.titlewrap.tit2nd,.pagetit{
    width: 100%;
    max-width:  100%
}

.topcontent,#blogwrap,#hover06,table#gaiyo,article#partner,.faqpage #content,.contactpage #content,div.articlewrap{
    max-width: 100%;
}

#content p{
    line-height: 1.75
}

.forpc{
    display: none;
}

.forsp{
    display: block;
}

/*SP　ファーストビュー
--------------------------------------------*/
.mv{
    width: 100%;
    min-width: 100%;
    height: 80vh;
    margin: 20px auto 0px;
    display: block;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,0);
}

.mv section:nth-of-type(1){
    position: relative;
    z-index: 0;
    width: 100%;
    height: 30vh;
    background-color: rgba(255,255,255,0);
    transform: skew(0deg) translateX(0vw);
    display: block;
}

.mv section:nth-of-type(1)::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    z-index: 9;
    background-color:rgba(242,242,242,1);
    transform: skewY( -20deg ) translateX( 0vw ) translateY( -4.5vh );
    transform-origin: top left;
}

.mv h1{
    position: relative;
    font-size: 3.5em;
    font-style: italic;
    margin: 5% 0 0 2%;
    z-index: 9999;
}

.mv span:nth-of-type(1) {
    transform: translateX(0%);
}

.mv span:nth-of-type(2) {
    display: inline-block;
    transform: translateX(0%);
    text-align: left;
    position: relative;
}

.mv span:nth-of-type(3) {
    display: inline-block;
    transform: translateX(0%);
}

.mv span:nth-of-type(4) {
    transform: translateX(0%);
}

.mv section:nth-of-type(2) {
    width: auto;
    height: auto !important;
    overflow: hidden;
    position: absolute;
    top: 12vh;
    z-index: -99;
}

.flexslider .slides img{
    height: auto !important;
    object-fit: cover !important;
}

/*ページタイトル-------------------------------------------*/
.titlewrap{
    width: 100vw;
    min-width: 100%;
    height: 50vh;
    margin: 20px auto 40px;
    display: block;
    position: relative;
    background: rgba(255,255,255,0);
    top: 0;
    overflow: hidden;
}

.titlewrap section:nth-of-type(1){    
    position: relative;
    z-index: 0;
    width: 100%;
    height: 0vh;
    background-color: rgba(255,255,255,0);
    transform: skew(0deg) translateX(0vw);
    display: block;
}

.titlewrap section:nth-of-type(1)::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 40vh;
    z-index: 999;
    background-color:rgba(242,242,242,1);
    transform: skewY( -15deg ) translateX( 0vw ) translateY( -20vh );
    transform-origin: top left;
}

.titlewrap section:nth-of-type(2){
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.titlewrap img{
    height: 47vh;
    width: 100%;
    object-fit: cover;
    object-position: right 10%;
}

.titlewrap h1{
    position: relative;
    z-index: 9999999;
    font-size: 2.8em;
    font-weight: 700;
	letter-spacing:0;
    padding: 0;
    vertical-align: middle;
    align-self: center;
    transform: translateX( 0% )  translateX( 0vw );
    font-style: italic;
    margin: 5% 0 0 2%    
}

.titlewrap span:nth-of-type(1){
    transform: skew( 0deg );
    text-align: left
}

.titlewrap span:nth-of-type(2){
    transform: skew( 0deg ) /*translateX(9%)*/;
    text-align: left
}



/*spヘッダー----------------------------------*/
div#branding p{
    font-size: 1.143em;
}

article#header #branding img{
    width: 60px;
    margin-left: .5%;
}

div#branding p:nth-of-type(1){
    margin-right: .5em;
}

article#header section:nth-of-type(1){
    width: 85%;
}
article#header section:nth-of-type(2){
    width: 15%;
    height: 100%;
}

div#branding{
    padding-left: .5rem;
    justify-content: flex-start
}

.slidein{
    padding: 0 3%
}

#rideice01.slidein{
    padding: 0;
}

.diagonalline {
    /*margin: 40px calc(50% - 50vw);*/
}

.woodtit {
    font-size: 1.286em;
    margin-bottom: 20px;
}

#btwrap p {
    width: 100%;
}

.watertoyspage #btwrap p{
    margin-bottom: 0%;
}

#btwrap p:nth-of-type(even){
    margin-top: 2%;
    margin-bottom: 2%;
}

#btwrap p:last-of-type{
    margin-bottom: 0;
}

#btwrap2 {
    margin: calc(40px - 2%) auto 0;
    padding-left: 0;
    padding-right: 0;
}

#btwrap2 p{
        text-align: center;
}

#btwrap2 p a{
    padding-left: 4%;
    padding-right: 4%;
    background-position: 10% center;
    background-size: 10%;
}

#btwrap2 img{
    width: 60%;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}


#footer {
    margin: 30px auto 0;
}

#footer #site-info {
    padding: 40px 0;
}

#menu-fnav2 {
    font-size: 0.875em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 70%;
    margin: 0 auto;
}

#menu-fnav2 li{
    width: 45%;
    height: 2em;
    text-align: left;
}

#menu-fnav2 li:after {
    content: "";
}

#foottable {
    margin: 40px auto 0;
    font-size: 0.714em;
}

#foottable img {
    width: 60px;
}

#copywrap {
    display: block;
    padding: 20px 5%;
}

p#copy {
    text-align: center;
    font-size: 14px;
    font-size: 0.714em;
}

#footnav {
    font-size: 0.714em;
    margin-top: 10px;
}

/*トップページ*/
.pagetit {
    font-size: 1.571em;
    line-height: 1.25;
}

#probt ul li{
    width: 49.5%;
    margin-bottom: 1%
}

#navul ul li {
    width: 100%;
    margin-bottom: 2%
}

#navul ul li a {
    font-size: 1.124em;
    padding: 1em 0;
}

dd.newstit {
    padding-right: 2em;
}

/*SP お知らせ　シングルページ----------------------------------*/
#blogwrap {
    max-width: 768px;
    margin: 40px auto 0;
}

#blogwrap section#mainsection {
    width: 100%;
    padding: 0 2%;
}

#blogwrap section#sidewrap {
    width: 100%;
   padding: 0 2%;
}

select#alist {
    width: calc(96% - 1.333em);
    margin-left: 1.333em;
}

.navigation {
    padding-top: 20px;
    font-size: .875em;
    line-height: 1.25;
    flex-wrap: wrap;
}

.nav-previous,.nav-next{
    width: 100% ;
    padding-right: 0%;    
}


.nav-previous a,.nav-next a{
    display: block;
    width: 100% ;
    padding-top: .5em;
    padding-bottom: .5em;
}

#main .widget-area ul li.blogli p{
    padding-left: 1.333em;
    text-indent: -1.333em;
}

#main .widget-area ul li.blogli p span{
    display: block;
    padding-left: -3em;
}

/*SP 私たちの仕事とは----------------------------------------*/
#masterplan ul li {
    width: 49%;
    margin-right: 1%;
    margin-bottom: 2%;
}

#flowimg{
    overflow-x: scroll;  /* 横スクロールの指定 */
    white-space: nowrap;  /* 横スクロールの指定 */
    overflow-scrolling: touch;  /* スクロールを滑らかにする */
    -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
    position: relative;
    padding-bottom: 20px;
}

.scroll-hint-icon {
    width: 140px !important;
    height: 90px !important;
    background: rgba(87, 209, 255, .8) !important;
}

#characteristics section{
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: flex;
}

#characteristics section:last-of-type{
    margin-bottom: 0;
}

#characteristics section figure{
    width: 23%;
    align-self: center;
    text-align: center;
}

#characteristics section figure img{
    margin: 0 auto;
    display: inline-block;
}

#characteristics section div{
    padding-left: 2%;
}

#characteristics section h2{
    margin: 0;
    text-align: left
}

/*取扱製品*/

div#container.productspage #content{
    padding-left: 0%;
    padding-right: 0%;
}

.bigContent h1{
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

.bigContent section#productMv{
    position: relative;
    width: 100%;
    padding:0;
    box-sizing: border-box;
    margin: 0 auto;
    height: auto;
}

section#productMv .parent{
    height: auto;
}

section#productMv .parent img {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: cover;
}

section#productMv .child {
    position: static;
    background: #fff;
    width: 90%;
    padding: 3% 4%;
    margin: 0 auto;
    box-sizing: border-box;
    top: 10%;
    transform: translateY(-10%);
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
}


.smallContent div:nth-of-type(1) {
    width: 100%;
    padding: 0 5% 1em 0;
    align-self: flex-end;
}

.smallContent div:nth-of-type(2) {
    width: 100%;
}


.itemlist {
    justify-content:space-between
}
.itemlistDiv {
    width: 49.5%;
    margin-bottom: 1%;
}

#btwrap p a {
    background-position: 3% center;
    background-size: 8%;
}

#chakusuiwrapdiv {
    display: block;
}

#chakusuiwrap section {
    width: 100%;
}

#chakusuiwrap section figure{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
	
#chakusuiwrap section div figure:nth-of-type(1) {
    height: auto;
}

#chakusuiwrap section div figure:nth-of-type(2) img {
    width: 100%;
}	
	
#chakusuiwrap section:nth-of-type(2) {
    margin-top: 40px;
}

#chakusuiwrap section:nth-of-type(2) br.forsp{
    display: none;
}

#chakusuiwrap section div p {
     padding-left: 0%; 
     padding-right: 0%; 
}

/*導入実績*/
.pagenation ul {
    left: 0%;
}

#hover06 div {
    width: 49%;
    font-size: 0.714em;
    line-height: 1.25em;
}

/*会社概要*/
table#gaiyo {
    border-bottom: none;
}

table#gaiyo th {
    display: block;
    width: 100%;
    padding: .5em 1em 0 1em;
    border-bottom: none;
    border-right: none
}

table#gaiyo td {
    display: block;
    width: 100%;
    padding: 0 1em .5em 2em;
    border-top: none;;
}

div#partnerwrap {
    display: block;
    height: 100%;
}

div#partnerwrap section {
    width: 100%;
    max-width: 768px;
}

/*会社概要-----------------------------------------------------------------------*/

#partnerwrap figure{
    clear: both;
    padding-top: 20px;
    padding-bottom: 5px;
}

#partnerwrap .aboutdiv:nth-of-type(1) figure{
    padding-top: 0;
}

article#partner h2 {
    font-size: 1.286em;
    font-weight: bold;
    margin-bottom: .5em;
    margin-top: 5px;
}

.aquahr{
    color: #ccc;
    margin-top: 20px;
}

.aboutdiv div{
    float: none;
    clear: both;
    line-height: 1.5em;
}

.aboutdiv figure{
    clear: both;
    float: none;
}

.aboutdiv div{
    width: 100%;
}

.aboutdiv dd {
    width: calc(100% - 6em);
}

article#partner section:nth-of-type(1) figure img {
    max-width: 200px;
}

article#partner section:nth-of-type(2) div{
    width: 100%;
    align-items: center;
}

article#partner section:nth-of-type(3) div{
    width: 100%;
}

article#partner section:nth-of-type(2) figure{
    width: 33.3333%;
    align-self: center;
}

article#partner section:nth-of-type(2) figure img{
    width: 80%;
    max-width: 120px;
    height: auto;
}


article#partner section:nth-of-type(3) figure{
    width: 50%;
}

article#partner section:nth-of-type(3) figure img{
    width: 100%;
    max-width: 150px;
    height: auto;
}




/*よくある質問*/
.qa__box > dl > dt {
    padding: 10px 7% 10px 2%;
}

.pageSubTitle2 {
    font-size: 1em;
    line-height: 1.7;
    padding-right: .5em;
}

.qa__box > dl > dt > span {
    font-size: 30px;
    margin-right: .25em;
}

.qa__box > dl > dt .crossBar {
    width: 20px;
    height: 20px;
    right: 2%;
}

.qa__box > dl > dd > span {
    font-size: 30px;
    margin-right: .25em;
}

.qa__box > dl > dd.is-open {
    padding: 10px 7% 10px 3%;
}

/*お問合せ*/
#contactwrap h1 {
    font-size: 1.714em;
}

h1#minih1{
    font-size: 1.286em;
    margin-bottom: 0;
}

div#formwrap p {
    line-height: 1.75;
 }
 
 p.tel{
    font-size: 1.571em !important;
    margin-top: 20px;
    margin-bottom: 20px !important;
    font-weight: bold;
}


table.mailform th{
    display: block;
    width: 100%;
}
table.mailform td{
    display: block;
    width: 100%;
}
table.mailform th p {
    margin-left:0px;
}

input[type="text"],input[type="email"],input[type="number"],textarea {
    width: 100%;
}

#sendtd,#sendtd p{
    margin-left: 24px;
}

.wpcf7 .wpcf7-response-output {
    margin: 10px auto 0;
    padding: 8px 35px 8px 14px;
    text-shadow: 0 1px 0 rgba(0,0,0,0);
    width: 98%;
    text-align: left;
}

.textcontent h1.pagetit{
    padding-right: 2%;
    padding-left: 2%;
}    
  
}/*768-----------------------------------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 480px) {
body {
/* 480pxまでの幅の場合に適用される 
        background-color:#F9DF2C;*/
        min-width: 100%;
    }

.drawer-content {
	padding: 2rem 0 0 2rem;
}

.drawer-list li {
	padding: 10px;
	font-size: .85em;
}

.drawer-list li li{
	font-size: 1em;
}

.drawer-list li:before {
    font-size: .85em;
    padding-right: 1em;
}

.mv{
    height: 70vh;
}

.mv section:nth-of-type(1) {
    height: 18vh;
}    

.mv section:nth-of-type(1)::before {
    height: 30vh;
    transform: skewY(-15deg) translateX(0vw) translateY(-5vh);
}

.mv section:nth-of-type(2) {
    width: auto;
    height: 100% !important;
    top: 12vh;
    transform: translateY(.5vh)
}

.mv h1 {
    font-size: 2.286em;
}

.titlewrap {
    height: 40vh;
}

.titlewrap section:nth-of-type(1)::before {
    height: 40vh;
    transform: skewY(-15deg) translateX(0vw) translateY(-18vh);
}

.titlewrap h1 {
    font-size: 1.7rem;
    margin: 0% 0 0 2%;
    padding-top: 8%
}

.titlewrap h1.oneLine{
    padding-top: 12%;
}

#probt ul li{
    width: 49%;
    margin-bottom: 2%
}

dt.newsday {
    width: 6em;
}

dd.newstit {
    width: calc(100% - 6em);
    padding-right: 2em;
}

#chakusuiwrap section:nth-of-type(2) br.forsp{
    display: block;
}
   
}/* 480px end ---------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 320px) {
body {
/* 320pxまでの幅の場合に適用される
    background-color: #68B876;*/
    min-width: 100%;    
    }
}/* 320px end ---------------------------------------------------------------------------------------------------------------------------------*/

#cboxLoadedContent {
    background: rgba(255,255,255,1) !important;
}

#cboxTitle {
    width: 100% !important;
    top: -40px !important;
    font-size: 1.517rem !important;
    text-align: center !important;
    font-weight: bold !important;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;

}