/*
Theme Name: rucolier
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.5
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns

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.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize
Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
--------------------------------------------------------------*/


html {
 margin-top: 0px !important;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
abbr, address, cite, code,
del, dfn, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	/*font-family: "游ゴシック","メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/	
	/*font-family: "メイリオ", Meiryo, "游ゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family:"游明朝","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	line-height: 1.7em;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	color: #000;
	font-size: 18px;
}

em {
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace, sans-serif;
	color: #000;
	font-size: 16px;
	font-style: italic;	
}

body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {
    list-style:none;
}
/*blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
	color: #333;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
   /* border-collapse:collapse;*/
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

/*li {
	list-style: none;	
}*/

img {
	vertical-align: bottom;
}

/*end reset*/

/* ----------------------------------------------------
    text
---------------------------------------------------- */

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

.sans-serif {
	font-family: "游ゴシック","メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
}

.tc {text-align: center !important;}
.tr {text-align: right !important;}
.tl {text-align: left !important;}

.bold {font-weight:bold;}
 
.font10{font-size:10px !important;}
.font11{font-size:11px !important;}
.font12{font-size:12px !important;}
.font13{font-size:13px !important;}
.font14{font-size:14px !important;}
.font15{font-size:15px !important;}
.font16{font-size:16px !important;}
.font17{font-size:17px !important;}
.font18{font-size:18px !important;}
.font19{font-size:19px !important;}
.font20{font-size:20px !important;}
.font21{font-size:21px !important;}
.font22{font-size:22px !important;}
.font23{font-size:23px !important;}
.font24{font-size:24px !important;}
.font25{font-size:25px !important;}
.font26{font-size:26px !important;}
.font27{font-size:27px !important;}
.font28{font-size:28px !important;}
.font29{font-size:29px !important;}
.font30{font-size:30px !important;}
.font32{font-size:32px !important;}
.font34{font-size:34px !important;}
.font36{font-size:36px !important;}
.font40{font-size:40px !important;}
 
/* ----------------------------------------------------
    float
---------------------------------------------------- */
.fr {float: right !important;}
.fl {float: left !important;}
 
.clear {clear: both;}
 
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
 

/* ----------------------------------------------------
    margin
---------------------------------------------------- */
 
.mt00 { margin-top:  0px !important; }
.mt05 { margin-top:  5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt80 { margin-top: 80px !important; }
 
.mr00 { margin-right:  0px !important; }
.mr05 { margin-right:  5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr65 { margin-right: 65px !important; }
.mr6_5 { margin-right: 6.5% !important; }
 
.mb00 { margin-bottom:  0px !important; }
.mb05 { margin-bottom:  5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb55 { margin-bottom: 55px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb76 { margin-bottom: 76px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }
 
.ml00 { margin-left:  0px !important; }
.ml05 { margin-left:  5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
 
/* ----------------------------------------------------
    padding
---------------------------------------------------- */
 
.pt00 { padding-top:  0px !important; }
.pt05 { padding-top:  5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }
.pt45 { padding-top: 45px !important; }
.pt80 { padding-top: 80px !important; }
 
.pr00 { padding-right:  0px !important; }
.pr05 { padding-right:  5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr35 { padding-right: 35px !important; }
.pr40 { padding-right: 40px !important; }
 
.pb00 { padding-bottom:  0px !important; }
.pb05 { padding-bottom:  5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb45 { padding-bottom: 45px !important; }
.pb80 { padding-bottom: 80px !important; }
 
.pl00 { padding-left:  0px !important; }
.pl05 { padding-left:  5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl35 { padding-left: 35px !important; }
.pl40 { padding-left: 40px !important; }


/*共通*/

li {list-style-type: none}

.main_under {
	background-color: #000;
	text-align: center;
    color: #fff;
}

img {
	max-width: 100%;
}

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

.section-title {
	font-size: 32px;
	font-family:"游明朝","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight: normal;
}

.top-button {
	position: relative;
	display: block;
	width: 180px;
	height: 44px;
	font-family:"游明朝","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	box-sizing: border-box;
	text-align: center;
    padding: 7px 0 6px;
	transition: 0.3s;
	font-size: 16px;
}

.top-button:before {
	content: "";
	display: block;
	border: solid 1px #000;
	position: absolute;
	top: -3px;
	left: -3px;
	width: 100%;
	height: 100%;
	transition: 0.3s;
	box-sizing: border-box;
}

.top-button:after {
	content: "";
	display: block;
	border: solid 1px #000;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	transition: 0.2s;
	box-sizing: border-box;
}

.top-button:hover {
	background-color: #000;
	color: #fff;
	transition: 0.2s;
}

.top-button:hover:after,
.top-button:hover:before {
	top: 0px;
	left: 0px;
	transition: 0.2s;
}

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

header

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


#header-logo {
	padding: 30px 0 28px;
}

#header-logo a {
	display: block;
	margin: 0 auto;
	max-width: 168px;
}

#header-logo img {
	display: block;
	margin: 0 auto;
}

#header-navi {
	background-color: rgba(0,0,0,0.6);
}

#header-navi ul {
	max-width: 1000px;
	width: 96%;
	margin: 0 auto;
	padding: 10px 0 7px;
}

#header-navi ul li {
	float: left;
	text-align: center;
	width: 25%;
	box-sizing: border-box;
}

#header-navi ul li a {
	color: #fff;
}



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

footer

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

#colophon {
	background-color: #000;
	padding: 50px 2% 37px;
}

#footer-logo img {
	display: block;
	margin: 0 auto;
}

.copyright {
	color: #fff;
	text-align: center;
	width: 96%;
	margin: 0 auto;
	font-size: 12px;
	padding-top: 20px;
}


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

top

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

#top-main {
	height: calc(100vh - 163px);
	position: relative;
	/*background-image: url("images/top/section01/main.png");*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.bg-slider {
	height: 100%;
	widows: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#header-navi.front {
	position: absolute;
	width: 100%;
	bottom: 0;
}

/*top01*/
.top01-box {
	max-width: 1200px;
	width: 96%;
	margin: 160px auto;
}

.top01-left {
	float: left;
	width: 42%;
	box-sizing: border-box;
	margin-right: 5%;
	position: relative;
}

.top01-left:before {
	content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-color: #eee;
    width: 100%;
    height: 100%;
    transform: rotate(6deg);
    right: 0;
}


.top01-right {
	float: left;
	width: 53%;
	box-sizing: border-box;
	padding: 10px 0;
}

.top01-text {
	font-size: 16px;
	margin: 25px 0 35px;
    line-height: 36px;
}


/*top02*/
#top02 {
	background-color: #000;
	padding: 70px 0;
	overflow: hidden;
}

#top02 .section-title {
	text-align: center;
	width: 96%;
	margin: 0 auto 40px;
	color: #fff;
}

.top02-product-box ul li {
	width: 480px;
	box-sizing: border-box;
}

#top02 .top-button {
	color: #fff;
}

#top02 .top-button {
	margin: 45px auto 0;
}

#top02 .top-button:before,
#top02 .top-button:after {
	border: solid 1px #fff;
}

#top02 .top-button:hover {
	background-color: #fff;
	color: #000;
}

.loop-slider {
  display: flex;
}
.slider__inner {
  display: flex;
}

.slider__inner:first-child {
  animation: loop 90s linear infinite;
}
 
.slider__inner:nth-child(2) {
  animation: loop2 90s -60s linear infinite;
}
 
.slider__inner:last-child {
  animation: loop3 90s -30s linear infinite;
}
 
@keyframes loop {
  0% {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes loop2 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-200%);
  }
}
 
@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}


/*top03*/
.top03-box {
	max-width: 1200px;
	width: 96%;
	margin: 180px auto 180px;
}

#top03 .section-title {
	text-align: center;
	margin-bottom: 45px;
}

#top03 .top-button {
	margin: 45px auto 0;
}

.news-box {
	float: left;
	width: 30%;
}

.news-box:nth-child(2) {
	margin: 0 5%;
}

.news-photo {
	background-color: #000;
    width: 100%;
    padding-bottom: calc(200/300*100%);
	margin-bottom: 14px;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	transition: 0.4s;
	position: relative;
}

.news-photo:hover {
	background-size: 120%;
	transition: 0.4s;
}

.news-photo:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.4);
	transition: 0.4s;
	opacity: 0;
}

.news-photo:hover:after {
	opacity: 1;
	transition: 0.4s;
}

.news-photo .hide-read{
	z-index: 10;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 45%;
	width: 50%;
	opacity: 0;
	transition: 0.2s;
	margin: 0 25%;
	box-sizing: border-box;
	border: solid 1px #fff;
	padding: 7px 0 5px;
}

.news-photo:hover .hide-read{
	opacity: 1;
	transition: 0.3s;
}

.news-date {
	display: block;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    float: left;
    padding: 3px 7px 1px;
    margin-right: 8px;
}

.news-title {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*top04*/
#top04 {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto 180px;
}

#top04 .section-title {
	text-align: center;
	margin-bottom: 45px;
}

.top-contact {
	display: block;
	overflow: hidden;
	background-color: #000;
	transition: 0.4s;
	position: relative;
}

.top-contact img {
	transition: 0.4s;
}

.top-contact:hover img {
	transform: scale(1.2,1.2);
	transition: 0.4s;
	opacity: 0.7;
}

.hide-read {
	text-align: center;
	color: #fff;
	position: absolute;
	top: 50%;
	width: 30%;
	opacity: 0;
	transition: 0.2s;
	margin: 0 35%;
	box-sizing: border-box;
	border: solid 1px #fff;
	padding: 7px 0 5px;
}

.top-contact:hover .hide-read {
	opacity: 1;
	transition: 0.3s;
}

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

contact

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

.page-main {
	width: 100%;
	height: 450px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.page-nav {
	background-color: #000;
}

.page-nav ul {
	max-width: 1000px;
	width: 96%;
	margin: 0 auto;
	padding: 5px 0 4px;
}

.page-nav ul li {
	float: left;
	width: 25%;
	box-sizing: border-box;
	text-align: center;
}

.page-nav ul li a {
	color: #fff;
}

/*section01*/
#contact01 {
	max-width: 1000px;
    width: 96%;
    margin: 80px auto;
    text-align: center;
}

.contact-text01 {
	font-size: 16px;
    line-height: 36px;
	margin-top: 20px;
}

/*section02*/
#contact02 {
	max-width: 1000px;
	width: 96%;
	margin: 80px auto 120px;
}

#contact02 .section-title {
	text-align: center;
	margin-bottom: 40px;
}

#contact-form {
	max-width: 650px;
	width: 96%;
	margin: 0 auto;
}

#contact-form dl {
	border-bottom: solid 1px #000;
	border-right: solid 1px #000;
	border-left: solid 1px #000;
}

#contact-form dl:first-child {
	border-top: solid 1px #000;
}

.contact-text dt {
	padding-bottom: 230px !important;
}

#contact-form dl dt {
	float: left;
    width: 30%;
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    padding: 10px 10px 8px;
    border-bottom: dotted 1px #666;
    font-size: 16px;
}

#contact-form dl dd {
	float: left;
    width: 70%;
    box-sizing: border-box;
}

#contact-form dl dd input {
	width: 100%;
    height: 100%;
    font-size: 16px;
    box-sizing: border-box;
    padding: 12px;
	border: none;
}

#contact-form dl dd .wpcf7-textarea {
	width: 100%;
    height: 100%;
    font-size: 16px;
    box-sizing: border-box;
    padding: 12px;
	border: none;
}

.wpcf7-submit {
	display: block;
    max-width: 300px;
    width: 90%;
    margin: 40px auto 0;
    text-align: center;
    box-sizing: border-box;
    padding: 13px 2% 11px;
    font-size: 16px;
    background-color: transparent;
    box-shadow: none;
    border: solid 1px #000;
}


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

news

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

.news-container {
	max-width: 700px;
	width: 96%;
	margin: 80px auto 120px;
}

.news-archive-box {
	margin-bottom: 50px;
}

.news-archive-photo {
	float: left;
	width: 30%;
	box-sizing: border-box;
	margin-right: 5%;
	padding-top: calc(90/300*100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.news-archive-photo img {
	width: 100%;
	height: auto;
}

.news-archive-textarea {
	float: left;
	width: 65%;
	box-sizing: border-box;
}

.news-archive-time {
	background-color: #000;
    color: #fff;
    box-sizing: border-box;
    padding: 5px 10px 2px;
    display: inline-block;
    font-size: 16px;
    margin-bottom: 7px;
}

.news-archive-title {
	font-size: 20px;
	margin: 10px 0 5px;
}

.news-archive-text {
	font-size: 16px;
}

.news-archive-box .top-button {
	margin-top:15px;
}

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

news single

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


.news-single-box {
	max-width: 700px;
	width: 96%;
	margin: 80px auto 120px;
}

.news-single-thumbnail img {
	width: 100%;
	height: auto;
}

.news-single-title {
	font-size: 27px;
    margin: 20px 0 13px;
}

.news-single-content {
	font-size: 16px;
    line-height: 2em;
    margin-bottom: 40px;
}

.news-single-box .top-button {
	margin: 0 auto;
}


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

about

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

.about-text01 {
	font-size: 16px;
    line-height: 36px;
	margin-top: 20px;
}

.about-text02 {
	font-size: 16px;
    line-height: 36px;
	margin-top: 20px;
}


/*about01*/
#about01 {
	max-width: 1000px;
	width: 96%;
	margin: 80px auto 80px;
	text-align: center;
}

/*about02*/
#about02 {
	
}

#about02 .section-title {
	text-align: center;
	background-color: #000;
	color: #fff;
	box-sizing: border-box;
	padding: 7px 2% 7px;
}

.about02-box {
	max-width: 1000px;
	width: 96%;
	margin: 80px auto 80px;
}

.about02-left {
	float: left;
	width: 37%;
	box-sizing: border-box;
	margin-right: 3%;
}

.about02-right {
	float: left;
	width: 60%;
	box-sizing: border-box;
	padding-top: 13px;
}

/*about03*/
#about03 {
	max-width: 1000px;
	width: 96%;
	margin: 80px auto 140px;
}

#about03 .section-title {
	border-bottom: solid 2px #000;
    margin-bottom: 30px;
    padding-bottom: 4px;
}

.about03-inbox01 {
	margin-bottom: 30px;
}

.about03-text01 {
	font-size: 16px;
	line-height: 36px;
	margin-top: 7px;
}