@charset "utf-8";
/**********************************
Theme Name: onecolum
Theme URI: http://inc88.com/
Description: レスポンシブデザイン無料テーマ
Version: 1.1.1
Author: Tommy
Author URI: http://inc88.com/

■全体定義
■クラス定義
■動画レスポンシブ
■画像系
■リンク・パンくず・カテゴリーリンク
■ヘッダー
■コンテンツ
■フッター
■widht 768px以上

**********************************/
/*--- リセット ------------------*/
* {margin: 0;padding: 0;}
a {text-decoration: none;}
ul, ol {list-style: none;list-style-position:inside;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*--- 全体定義 ------------------*/
html {
	font-family: '游ゴシック  Medium','メイリオ', Meiryo,'-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN',"segoe ui",'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-size : 95%;
	line-height : 1.7;
	color: #333;
}

body {
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	width:100%;
	background: url(images/body-bg.jpg) repeat;
}
header, nav, main, article, section{
	display:block;
}

/*--- クラス定義 ----------------*/
.clearfix:after {
	visibility: hidden;
	height: 0;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
}
* html .clearfix {zoom: 1;}
*:first-child+html .clearfix {zoom: 1;}
.clear {clear: both;}
.center {
	text-align: center;
}
.wp-caption {text-align: center;}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.yellow{
	background: rgba(0,0,0,0) linear-gradient(transparent 60%,#ff0 0) repeat scroll 0 0;
	font-weight:bold;
	color: #595959;
}
.red{
	color:#ff0000;
	font-size:110%;
}
.bold{font-weight: bold;}
table{
	border-collapse: collapse;
	border-top:1px solid #FCD55B;
	border-left:1px solid #FCD55B;
}
th,td{
	border-bottom:1px solid #FCD55B;
	border-right:1px solid #FCD55B;
	padding:7px;
}
th{font-weight:normal;}
caption{
	padding: 7px;
	background:#FCD55B;
	color: #000;
	font-weight: bold;
    font-size: 120%;
}
i{
	margin-right:5px;
}
.bottom-margin5{
	margin:0 0 5em;
}
.img-bottom{
	margin:0 0 1.5em;
}
/*--- 動画レスポンシブ --------*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin: 0 auto 24px 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*--- 画像系 --------------------*/
img {
	max-width: 100%!important;
	height: auto;
	vertical-align: middle;
	border: 0;
	;-webkit-backface-visibility: hidden;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}
/*--- リンク・パンくず --------------------*/
a {
	color: #1122cc;
	text-decoration:none;
}

.pankuzu {
	font-size: 13px;
	padding-bottom: 10px;
	color: #222;
	text-align: left;
}
.pankuzu ol{
	overflow:hidden;
}
.pankuzu ol li{
	float:left;
}
.pankuzu ol li a.item-link:after{
	content: '\25B6';
	padding-right: 5px;
}
/*--- カテゴリーリンク ----*/
.cat_tag {
	margin-bottom: 24px;
	padding: 0 0 12px 0;
	text-align: left;
	border-bottom: 1px dashed #ccc;
	word-break: keep-all;
	line-height: 2em;
}
.cat_tag a {
	color: #fff;
	background-color: #444;
	margin: 0 0.2em 0 0;
	padding: 3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-decoration: none;
}
.cat_tag a:hover {color: #ffd700;}

/*--- ページ送り ----------------*/
#page_pn {margin: 0 0 20px 0;}
#page_pn dl {text-align: left;}

.pager{text-align: center;}
a.page-numbers,.pager .current{
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px 8px;
	margin: 10px 2px 0 2px;
}
.pager .current{
	background: #444;
	border: 0;
	color: #fff;
}

/*******************************************************************************
サイトごとの個別内容
ヘッダー
********************************************************************************/
header{
	width:100%;
	margin:0 auto;
	background: url(images/body-bg.jpg) repeat;
	box-sizing: border-box;
}
.header-fixed {/* 指定値スクロールでヘッダー追尾固定 */
	position: fixed;
	left: 0;
	right: 0;
	z-index: 10;
	border-bottom: 1px solid #ccc;
}
header #logo{
	position: relative;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
header #logo img{
	max-width:300px !important;
}
#menu-btn {/* スマホ幅の場合は右上にメニューボタン表示 */
	position: absolute;
	display:block;
	top: 35%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	right: 10px;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
	background: #4b0082;
	cursor: pointer;
	z-index: 20;
}
.active-btn{/* クローズ変更時は色変更 */
	background: #fff !important;
	color: #191970 !important;
}
#menu {/* スマホ幅では右からスライドで表示させる */
	width: 300px;
	height: 100%;
	background: #4b0082;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	transform: translateX(300px); /* right0から250px移動した位置 */
	transition: all .5s; /* 移動する速さ */
}
#menu.open {
	transform: translateX(0); /* right0まで-250px移動 */
}
.menu-background {/* メニュースライド時は全体を薄くする */
	position: fixed;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 0;
	height: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2;
	opacity: 0; /* 透明度を0にすることで隠す */
	transition: opacity 0.5s; /* 透明度の0→1になる速度 */
}
.menu-background.open {
	width: 100%;
	height: 100%;
	opacity: 1; /* メニューが表示されているときには背景が表示 */
}
#menu ul{
	padding:15px;
}
#menu li{
	width:100%;
	border-bottom: 1px dotted #fff;
	padding:10px;
    margin: 0 0 10px;
}
#menu li:last-child{
	border:none;
}
#menu li a{
	display:block;
	padding:0;
	color:#fff;
}
.contact-bt a{
	background: none;
    border-radius: 6px;
    padding: 0;
    color:#fff !important;
}
/*--- コンテンツ --------------------*/
article, section{
    width: 100%;
    margin: 0 0 2em;
    box-sizing: border-box;
}
.innger{
    width: 100%;
    margin: 0 auto 3em;
    padding:0 10px;
    box-sizing: border-box;
}
article#top-page {
    position: relative;
    background-color: #000;
    width: 100%;
    overflow: hidden;
    color:#fff;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb),var(--bs-bg-opacity));
    box-sizing: border-box;
}
article#top-page:before {
    content: "";
    display: block;
    padding-bottom: 40%;
}
article#top-page .movie-inner {
	display: block;
    width: 80%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity));
    text-align: center;
    z-index: 2;
    animation: fadeIn 3s forwards;
    box-sizing: border-box;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
article#top-page h1{
	font-size: 1.5rem!important;
}
article#top-page .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: .2;
    z-index: 1;
}
article#top-page video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}
section h2{
	background: url(images/icon-title.svg) no-repeat center top;
	background-size: 40px;
	font-size: 200%;
	color: #C4A126;
	padding: 10vw 0 3vw;
	text-align: center;
}
.tt{
	position: relative;
	padding: 1.5rem 2rem;
	margin: 0 0 2em;
	font-size: 150%;
	text-align: center;
	-webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .1);
}
.tt:before,
.tt:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  content: '';
  background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
}

.tt:before {
  top: 0;
}

.tt:after {
  bottom: 0;
}
.bg-original{
	position: relative;
    padding: 50px 0 65px 0;
    color:#fff;
}
.bg-original:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #1A1A1A;
    -webkit-transform: skew(0deg, -12.5deg);
}
.bg-original:after {
    content: "";
    position: absolute;
    top: 7vw;
    left: 0;
    z-index: -2;
    width: 15%;
    height: 75%;
    background: #C4A126;
    -webkit-transform: skew(0deg, 12.5deg);
}
.text p{
	margin:0 0 1em;
	font-size: 120%;
    font-weight: bold;
}
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.row-reverse{
	flex-direction: row-reverse;
}
.box2 .left, .box2 .right{
	width:100%;
	box-sizing: border-box;
}
.box3 li{
	width:100%;
	text-align: center;
	padding: 5px;
    box-sizing: border-box;
}
.item_bt {
    text-align: center;
}
.item_bt a {
    display: inline-block;
    position: relative;
    background: #d2691e;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #fff;
    padding: 15px 40px;
    font-size: 130%;
    transition: .3s;
}
.item_bt a:before  {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 48%;
	left: 20px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #fff;
}
.item_bt a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 48%;
	left: 15px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #d2691e;
}
/*--- オールインワンパッケージ --------------------*/

#package ol{
  counter-reset:list;
  list-style-type:none;
  padding: 1.5em;
}
#package ol li{
  position:relative;
  line-height: 40px;
  margin: 7px 0 10px 30px;
  padding: 0 0 0 20px;
  font-size: 120%;
  font-weight: bold;
  color: #fff;
  background: #1A1A1A;
}
#package ol li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -50px;
  width: 40px;
  height: 40px;
  text-align: center;
  color: #fff;
  background: #ffa500;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#package ol li:after{
  content:"";
  display: block;
  position: absolute;
  left: -10px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*--- 30日間フリートライアル --------------------*/
.flow{
	margin: 0 0 2em;
}
.flow li{
	margin: 0 0 1em;
}
.flow-inner{
	position: relative;
    padding: 1.5vw 2vw 1.5vw 8vw;
    border: 2px solid #1A1A1A;
    font-size: 120%;
}
.flow-inner i{
	position: absolute;
    top: -4vw;
    left: -1vw;
    text-align: center;
    background: #1A1A1A;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    line-height: 1;
    padding: 10px 0 0 0;
    box-sizing: border-box;
}
.flow-inner i small{
	display:block;
}
/*--- 導入 製品案内--------------------*/
.inner-video{
	text-align:center;
	margin: 0 0 3em;
}
video.vid_main {
    width: 100%;
    max-width: 920px;
}
#introduction h3{
	font-size:180%;
	color:#C4A126;
	margin:0 0 0.5em;
}
.price-comparison{
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 200%;
    font-weight: bold;
    color: #ffff00;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    margin: 0 0 1em;
}
.price-comparison span{
	display:block;
	font-size: 80%;
	color: #fff;
}

#product h3{
  padding: 1rem 2rem;
  color: #fff;
  font-size: 120%;
  background: #094;
  margin: 0 0 1em;
  -webkit-box-shadow: 5px 5px 0 #007032;
  box-shadow: 5px 5px 0 #007032;
}
.img-title{
	background: #ffa500;
    color: #000;
    font-size: 140%;
}
/*--- どこでも設置可能 --------------------*/
.point-box {
    position: relative;
    padding: 2em 1.5em 0;
    margin: 0.5em 0 0;
    border: solid 2px #adcce8;
    border-radius: 8px;
}
.point-box:before {
    content: "Joygolf";
    position: absolute;
    display: block;
    top: -20px;
    left: 20px;
    background: #1A1A1A;
    font-size: 150%;
    font-weight: bold;
    padding: 0 10px;
}
.point-box h3{
	color: #f7ff78;
    font-size: 150%;
    margin: 0 0 0.5em;
}
.point-box ul{
	margin: 0 0 1em;
}
.point-box li{
	margin: 0 0 0.2em;
    font-size: 120%;
    font-weight: bold;
}
.set-table{
	max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.set-table table{
	width: 100%;
}
/*--- 問合せ ------------------*/
#contact-form {
    position:relative;
    margin:0 auto;
    width:100%;
    font-size: 100%;
    min-height:200px;
    z-index:5;
    padding:30px;
    border:1px solid #383838;
    /* My stipped background */
    background: #D1D1D1;
    /* Old browsers */
    background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
    /* FF3.6+ */
    /*border-radius*/
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    /*box-shadow*/
    -webkit-box-shadow:0px 1px 6px #3F3F3F;
    -moz-box-shadow:0px 1px 6px #3F3F3F;
    box-shadow:0px 1px 6px #3F3F3F;
    box-sizing: border-box;
}
/** my "fake" background that will hover the stripes **/
 #contact-form:after {
    background:#F9F9F9;
    margin:10px;
    position: absolute;
    content :" ";
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    border:1px #E5E5E5 solid;
    /*border-radius*/
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
}
/*** form styling **/

/** we remove the red glow around required fields since we are already using the red star */
 input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}
/** inputs and textarea**/
input:not([type="submit"]), textarea, select {
    outline:none;
    display:block;
    width:100%;
    padding:10px;
    border:1px dashed #DBDBDB;
    color:#3F3F3F;
    font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
    font-size:16px;
    /*border-radius*/
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    /*transition*/
    -webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
    -moz-transition:background 0.2s linear, box-shadow 0.6s linear;
    -o-transition:background 0.2s linear, box-shadow 0.6s linear;
    transition:background 0.2s linear, box-shadow 0.6s linear;
    box-sizing: border-box;
}
input:not([type="submit"]):active, textarea:active, select:active, input:not([type="submit"]):focus, textarea:focus, select:focus {
    background:#F7F7F7;
    border:dashed 1px #969696;
    /*box-shadow*/
    -webkit-box-shadow:2px 2px 7px #E8E8E8 inset;
    -moz-box-shadow:2px 2px 7px #E8E8E8 inset;
    box-shadow:2px 2px 7px #E8E8E8 inset;
}
input[type=radio] {
	width:auto;
	display: inline-block;
}

/* placeholder */
 ::-webkit-input-placeholder {
    color:#BABABA;
    font-style:italic;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#BABABA;
    font-style:italic;
}
textarea {
    min-height:150px;
    resize:vertical
}
/** labels**/

/** adding our icon font !! */
 .iconic:before {
    font-size:25px;
    font-family:'Alice', Verdana, serif;
}
.iconic.link:before {
    content:'/';
}
.iconic.quote-alt:before {
    content:"'";
}
.iconic.comment:before {
    content:"q";
}
.iconic.user:before {
    content:"u";
}
.iconic.mail-alt:before {
    content:"M";
}
label {
    color:#7F7E7E;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}
label:hover {
    color:#191919;
}
label:before {
    color:#C1BFBD;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
    margin-right: 10px;
}
label:hover:before {
    color:#969696;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    transition: color 1s ease;
}
#contact-form p {
    margin-bottom:20px;
}
.indication {
    color:#878787;
    font-size:12px;
    font-style:italic;
    text-align:right;
    padding-right:20px;
}
.send{
	display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
}
.required {
    color:#E5224C;
}
/** Styling the send button **/
 input[type=submit] {
    cursor:pointer;
    background:none;
    border:none;
    font-family:'Alice', serif;
    color:#767676;
    font-size:18px;
    padding:10px;
    border:1px solid #E0E0E0;
    text-shadow: 0px 1px 1px #E8E8E8;
    background: rgb(247, 247, 247);
    background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    /*border-radius*/
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    /*box-shadow*/
    -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
    /*transition*/
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
input[type=submit]:hover {
    color:#686868;
    border-color: #CECECE;
    background: rgb(244, 244, 244);
    background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    /*box-shadow*/
    -webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
    position:relative;
    top:1px;
    color:#515151;
    background: rgb(234, 234, 234);
    background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
    background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    /*box-shadow*/
    -webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
    box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
.wpcf7-spinner{
	width: 40px !important;
	height: 40px !important;
	margin: 0 10px 0 20px !important;
}
/*--- 下層ページ --------------------*/
.sub-header{
	background: #000;
    position: relative;
    margin:0 0 2em;
}
.sub-header h1{
    text-shadow: #696969 1px 1px 10px, #696969 -1px 1px 10px, #696969 1px -1px 10px, #696969 -1px -1px 10px;
    font-size: 130%;
    font-weight: bold;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
#post-content p{
	margin:0 0 1.5em;
}
/*--- フッター ------------------*/
footer{
	padding:2em 0 0;
	text-align:center;
}
footer small{
	background: #000;
    display: block;
    padding: 10px 0;
    color: #fff;
}

/********** widht 768px以上 *********************************/

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

/*--- ヘッダー ------------------*/
header .hgroup{
	max-width:1100px;
	margin:0 auto;
	display: flex;
	align-items: center;
}

header #logo{
	max-width:300px;
}
#menu {
	width: 70%;
	height: auto;
	margin:0 auto;
	background: none;
	position: inherit;
	transform: translateX(0px); /* スマホ以上はスライドさせない */
	text-align:center;
}
#menu-btn {
	display:none;
}
#menu ul{
	display: flex;
	justify-content: space-between;
	padding: 0;
}
#menu li{
	width:25%;
	border-bottom:none;
	padding:0;
    margin: 5px 0;
}
#menu li:last-child{
	border:none;
}
#menu li a{
	padding:10px;
	color:#333;
}
.contact-bt a{
	background: #000;
    border-radius: 6px;
    padding: 5px 10px;
    color:#fff !important;
}
/*--- コンテンツ ----------------*/
article#top-page h1{
	font-size: 3rem!important;
}
section{
    margin: 0 auto 5em;
}
section h2{
	font-size: 400%;
	background-size: 3vw;
	padding: 3vw 0;
}
.box2 .left, .box2 .right{
	width:49.5%;
}
.box3 li{
	width: calc(100% / 3);
}
.bg-original{
    padding: 7vw 0 10vw 0;
}
.item_bt a {
    font-size: 150%;
}
.flow li{
	width: calc(98% / 3) !important;
}
.flow-inner i{
    top: -1vw;
}
.flow-inner{
    padding: 1.5vw 2vw;
}
#contact-form {
    font-size: 120%;
    width:700px;
}
.sub-header h1{
    font-size: 300%;
}
/*--- フッター ------------------*/


/********** widht 768px end *********************************/

}
/********** widht 1100px以上 *********************************/

@media screen and (min-width : 1101px){
.innger{
    width: 1100px;
}

/********** widht 1100px end *********************************/

}