@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');

/* 呼び出し名
font-family: 'Raleway', sans-serif;
*/


/* リセット
------------------------------ */
* {padding: 0; margin: 0;}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure {margin: 0px; padding: 0px; font-size: 100%;}
li {list-style-type: none;}
ul {list-style-type: none;}
img {border: none; max-width: 100%; height: auto; vertical-align: middle;}
table {border-collapse: collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

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


/* 全体レイアウト
------------------------------ */
body {
margin: 0;
padding: 0;
font-family:Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
font-size: 14px;
color: #454e56;
background: #fff;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-text-size-adjust: none;
}

a {color: #45C0CD; text-decoration: none;}
a:hover {color: #C2C7CC; text-decoration: underline;}

.show a {color: #45C0CD; text-decoration: none;} /*折り畳み現在未使用*/
.show a:hover {color: #C2C7CC; text-decoration: none;}


/* ヘッダー
------------------------------ */
header {
background: #333b42;
height: 60px;
}

header .inner {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

#logo img {
width: 225px;
margin-top: 17px;
margin-left: 8px;
}


/* メニュー
------------------------------ */
#menu {
width: 100%;
background: #fff; /*古いブラウザ用*/
background: rgba(255,255,255,0.9);
border-bottom: 1px solid #333b42;
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#menubar {
width: 960px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #333b42;
}

#menubar li {
font-family: 'Raleway', sans-serif;
float: left;
width: 239px;
text-align: center;
border-right: 1px solid #333b42;
line-height: 40px;
letter-spacing: 0.3em;
}

#menubar a {
color:#333b42;
display: block;
width: auto;
text-decoration: none;
}

#menubar li:hover {
background: #F4F6F9;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.menuimg a {
width: 40px;
height: 40px;
display: inline-block;
background-image: url(../img/icon.png);
background-repeat: no-repeat;
background-size: 40px 200px;
}

.menu1 a {background-position: 0 0;}
.menu2 a {background-position: 0 -50px;}
.menu3 a {background-position: 0 -100px;}
.menu4 a {background-position: 0 -150px;}

/*スマホ用メニューを非表示*/
#menubar-s {
display: none;
}

/*３本線アイコンを非表示*/
#menubar_hdr {
display: none;
}


/* コンテンツ
------------------------------ */
.contents {
clear: both;
padding-top: 40px;
overflow: hidden;
}

.contents .inner {
width: 960px;
margin: 0 auto;
}

.main {
float: right;
width: 700px;
padding-bottom: 20px;
}

.sub {
float: left;
width: 240px;
}


/* 見出しセット
------------------------------ */
h2 {
clear: both;
font-family: 'Raleway', sans-serif;
font-weight: normal;
color: #2e363d;
font-size: 30px;
padding: 0 0 0 8px;
border-bottom: solid 2px #333b42;
}

h3 {
clear: both;
font-family: 'Raleway', sans-serif;
font-weight: normal;
color: #454e56;
font-size: 20px;
text-align: left;
line-height: 100%;
margin: 30px 0 0 10px;
}

h3:after {
display: block;
width: 40px;
height: 2px;
margin-top: 5px;
content:'';
background-color: #7EE1E9;
}

.h3-jp{ /*見出しに和文*/
font-family:Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
font-size: 14px;
}

h4 {
font-weight: normal;
color: #777e84;
font-size: 12px;
margin: 10px 10px 0 10px;
padding: 0 0 0 8px;
border-bottom: solid 1px #CED2D6;
}

.txt-box h4{margin: 30px 0 25px 0;} /*２個目以降*/

.h4 { /*txt-box内に詰めh4*/
color: #777e84;
font-size: 12px;
margin: 20px 0 15px 0;
padding: 0 0 0 8px;
border-bottom: solid 1px #CED2D6;
}


/* 汎用
------------------------------ */
.txt-box {
font-size: 14px;
line-height: 160%;
padding: 30px 20px; /*可変*/
border-bottom: solid 1px #777e84;
}

.txt-box2 {
font-size: 12px;
color: #777e84;
line-height: 160%;
padding: 25px 20px; /*可変*/
border-bottom: solid 1px #777e84;
}

.art-box {
text-align: center;
padding: 10px 0 30px 0; /*mtと併用*/
border-bottom: solid 1px #777e84;
}

.art-box2 {
text-align: center;
padding: 0 0 20px 0; /*詰め用*/
border-bottom: solid 1px #777e84;
}

.cap {
font-size:12px;
color:#888e96;
line-height:120%;
padding-top:10px;
}

.cap2 {
color:#888e96;
text-align: center;
padding-top:4px;
}

.data-box {
font-size: 16px;
line-height: 180%;
padding: 30px 20px; /*可変*/
border-bottom: solid 1px #777e84;
}

.data-box2 {
font-size: 15px;
line-height: 180%;
padding: 30px 20px; /*可変*/
border-bottom: solid 1px #777e84;
}


/* 動画
------------------------------ */
video {
width: 100%;
max-width: 600px;
}


/* トップのみ
------------------------------ */
body#top {
background: #fff url(../img/top_s.png) no-repeat center 90px; /*古いブラウザ用*/
background: #fff url(../img/top_l.png) no-repeat center 90px/auto 700px;
}

.top-box {
font-size: 14px;
line-height: 160%;
border-bottom: solid 1px #CED2D6;
padding: 20px; /*可変*/
}

.topline {border-top: solid 1px #CED2D6;}

.top-sub {
color: #777e84;
font-size: 12px;
margin-top: 20px;
}

.top-sub img {
width: 30px;
margin: 0 8px 0 10px;
}


/* RAYZトップ
------------------------------ */
#rayz {
height: 470px;
background: url(../img/top_rayz.png) no-repeat right 30px/auto 420px;
}

.rayz-box {
padding: 10px 0 0 5px;
border-bottom: solid 1px #777e84;
}
.rayz-box2 {
padding: 20px 10px 10px 10px; /*可変*/
border-bottom: solid 1px #777e84;
}
.rayz-box2 h3 {margin: 0px;}

.cls {
transition: all 1s linear 0s;
border-radius: 50%;
width: 250px; /*可変*/
}
.cls:hover {transform: rotateX(360deg);}

.rayz-cap {
font-size: 14px;
line-height: 160%;
margin: 340px 0 0 15px; /*可変*/
}


/* ACESトップ
------------------------------ */
#aces {
height: 420px;
background: url(../img/top_aces.png) no-repeat right 10px/auto 400px;
}

.aces-box {
padding: 20px 5px;
border-bottom: solid 1px #777e84;
}
.aces-box2 {
font-size: 14px;
line-height: 160%;
padding: 30px 10px 20px 20px; /*可変*/
border-bottom: solid 1px #777e84;
}


/* 下部ロゴ
------------------------------ */
.logo-cc {
width: 60px;
background: url("../img/logo_cc2.png") no-repeat;
}
.logo-cc a {display: inline-block;}
.logo-cc a:hover img {visibility: hidden;}

.logo-ec {
width: 60px;
background: url("../img/logo_ec2.png") no-repeat;
}
.logo-ec a {display: inline-block;}
.logo-ec a:hover img {visibility: hidden;}

.logo-wrap {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}


/* サブ
------------------------------ */
.subtitle {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: normal;
color: #333b42;
margin-top: 20px;
padding-left: 10px;
border-bottom: solid 1px #CED2D6;
}

.submenu {
color: #8A9197;
font-size: 12px;
margin-top: 10px;
}

.submenu li {
display: block;
padding: 2px 0 0 10px;
}

.subbg {
padding: 0 10px 20px 10px;
background: #F4F6F9;
border: solid 1px #CED2D6;
-webkit-box-shadow: 0 0 1px 1px #fff inset;	/*内側に白*/
box-shadow: 0 0 1px 1px #fff inset;
border-radius: 4px;
}


/* 一言フォーム
------------------------------ */
input[type="text"] {
color: #333b42;
font-size: 14px;
height:22px;
background-color: #fff;
border: solid 1px #777e84;
-webkit-appearance: none;
}

input[type="submit"],
input[type="button"],
input[type="reset"] {
color: #fff;
font-size: 14px;
padding: 2px 10px;
background: #7EE1E9;
border: solid 1px #7EE1E9;
border-radius: 4px;
-webkit-appearance: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
background: #CED2D6;
border: solid 1px #CED2D6;
cursor: pointer;
}

.form-ta {width: 100%;}
.form-ta td {padding: 2px 10px 2px 0;}

.wl {width: 100%;}
.ws {width: 50%;}

.conf {
font-size: 16px;
color: #45C0CD;
line-height: 180%;
}


/* PageTop
------------------------------ */
.pagetop {
clear: both;
width: 960px;
margin: 0 auto;
}

.pagetop a {
color: #fff;
font-size: 20px;
padding: 4px 20px;
background: #7EE1E9;
text-decoration: none;
text-align: center;
display: block;
float: right;
border-radius: 4px 4px 0 0;
}

.pagetop a:hover {
background-color: #CED2D6;
color: #fff;
-webkit-transition: 0.5s;
transition: 0.5s;
}


/* フッター
------------------------------ */
footer {
clear: both;
background: #333b42;
height: 40px;
border-top: 4px solid #7EE1E9;
-webkit-box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
}

#copyright {
clear: both;
font-size: 10px;
color: #8A9197;
text-align: center;
padding-top: 10px;
letter-spacing: 0.1em;
}


/* 文字と装飾
------------------------------ */
.stk {text-decoration: line-through;} 
.bold {font-weight: 600;}

.big {
font-size: 16px;
font-weight: 600;
}

.small {
font-size: 12px;
color: #777e84;
font-weight: normal;
line-height: 160%;
}

.small2 {
font-size: 10px;
color: #777e84;
line-height: 160%;
}

sup {
font-size: 80%;
vertical-align: text-top;
line-height: 100%;
}

.pict {border: solid 1px #777e84;}
.pict2 {border: solid 1px #CED2D6;}
.pict3 {border: solid 1px #CED2D6; border-radius: 5px;}

.kdmr {border-radius: 10px;}
.line {border-bottom: solid 1px #777e84;}


/* パレット
------------------------------ */
.key {color: #7EE1E9;}
.key2 {color: #45C0CD;}
.text {color: #454e56;} /*薄く566069*/
.dark {color: #333b42;}
.dgray {color: #777e84;} /*薄く8A9197*/
.lgray {color: #CED2D6;} /*濃くC2C7CC*/
.bg {color: #F4F6F9;}
.white {color: #fff;}

.red {color: #EE3300;} /*RAY用*/
.yellow {color: #FFBB00;}
.green {color: #22CC66;}
.blue {color: #3399EE;}


/* レイアウト用
------------------------------ */
.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

.nowrap {white-space: nowrap;}

.fx {display: flex;}
.fx2 {display: flex; flex-wrap: wrap;} /*折り返し*/


/* 整地
------------------------------ */
.mt1 {margin-top: 10px;}
.mt2 {margin-top: 20px;}
.mt3 {margin-top: 30px;}
.mt4 {margin-top: 40px;}

.mr1 {margin-right: 10px;}
.mr2 {margin-right: 20px;}
.mr3 {margin-right: 30px;}
.mr4 {margin-right: 40px;}

.mb1 {margin-bottom: 10px;}
.mb2 {margin-bottom: 20px;}

.pt1 {padding-top: 10px;}
.pb1 {padding-bottom: 10px;}
.pl1 {padding-left: 10px;}
.pr1 {padding-right: 10px;}
.pr2 {padding-right: 20px;}

.ml2-1 {margin-left: 20px;} /*可変*/
img.m2 {margin: 10px 10px 0 0;} /*複数用*/
img.m2s {margin: 5px 5px 0 0;} /*複数用小*/


/*その他
------------------------------ */
.mt-top {margin-top: 650px;}
.mt-top2 {margin-top: 250px;background: rgba(255,255,255,0.7);}
.sh {display:none;}/*スマホ用*/


/*画面幅800px以下
------------------------------------------------------------------------------------------ */
@media screen and (max-width:800px){

/*全体
------------------------------ */
body#top {background: #fff url(../img/top_l.png) no-repeat center 130px/auto 490px;}

#rayz {height: 340px; background: url(../img/top_rayz.png) no-repeat right 20px/auto 300px;}
#aces {height: 310px; background: url(../img/top_aces.png) no-repeat right 20px/auto 280px;}

.cls {width: 200px;}
.rayz-cap {margin: 230px 0 0 15px;}

/*ヘッダー
------------------------------ */
header .inner {width: auto;}

/*メニュー
------------------------------ */
#menu {border: none;}
#menubar {width: auto; border: none;}

#menubar li {
width: 50%;
border: none;
border-bottom: 1px solid #333b42;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#menubar li:nth-child(odd) {border-right: 1px solid #333b42;}

/*コンテンツ
------------------------------ */
.contents {padding-top: 10px;}
.contents .inner {width: auto; margin: 20px; /*画面幅に対して*/}
.main, .sub {float: none; width: auto;}

/*PAGE TOP
------------------------------ */
.pagetop {width: auto;}

/*その他
------------------------------ */
.mt-top {margin-top: 450px;}
.mt-top2 {margin-top: 150px;}

}


/*画面幅480px以下
------------------------------------------------------------------------------------------ */
@media screen and (max-width:480px){

/*全体
------------------------------ */
body#top {
background-image: url(../img/top_s.png); background-repeat: no-repeat; background-position: center 80px; background-size: 350px; /*古いスマホ用*/
background: #fff url(../img/top_s.png) no-repeat center 80px/auto 350px;
}

#rayz {height: 260px; background: url(../img/top_rayz.png) no-repeat right 30px/auto 200px;}
#aces {height: 260px; background: url(../img/top_aces.png) no-repeat right 50px/auto 200px;}

.cls {width: 175px;}
.rayz-cap {margin: 160px 0 0 5px;}

/*メニュー
------------------------------ */
#menubar-s {
position: absolute;
top: 60px; /*headerの高さと同じ*/
width: 100%;
z-index: 102;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.2);
box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

#menubar-s li {
font-family: 'Raleway', sans-serif;
border-bottom: 1px solid #333b42;
background: rgba(255,255,255,0.9);
line-height: 40px;
letter-spacing: 0.3em;
}

#menubar-s a {
color:#333b42;
display: block;
width: auto;
text-decoration: none;
padding-left: 50px;
}

/*スマホ用メニューを非表示から表示に切替*/
#menubar-s {display: block;}

/*PC用メニューを非表示*/
#menubar {display: none;}

/*３本線アイコン
------------------------------ */
#menubar_hdr {
display: block;
position: absolute;
top: 14px;
right: 12px;
width: 20px;
border: 1px solid #fff;
padding: 6px 6px 1px; /*上、左右、下余白*/
border-radius: 4px;
}

#menubar_hdr span {
display: block;
border-top: 3px solid #fff;
margin-bottom: 5px; /*バー同士の余白*/
}

/*その他
------------------------------ */
.ws,.wl {width: 100%;}
.sh{display:block;}
.pc{display:none;}
.mt-top {margin-top: 350px;}
.mt-top2 {margin-top: 100px;}

/*表示ボックス変更
------------------------------ */
.tableblock td { display: block; }
h3 {margin: 30px 0 0 0;} /*元は左10px*/

.top-box {padding: 20px 10px;} /*左右-10*/
.rayz-box2 {padding: 20px 0 5px 0;} /*下-5左右-10*/
.aces-box2 {padding: 30px 0 20px 10px;} /*左右-10*/
.txt-box {padding: 30px 10px;} /*左右-10*/
.txt-box2 {padding: 25px 10px;} /*左右-10*/
.data-box {padding: 30px 10px;} /*左右-10*/
.data-box2 {padding: 30px 10px;} /*左右-10*/
.ml2-1 {margin-left: 10px;} /*元は左20px*/
}


/* 表示モード切替
------------------------------ */
#viewport_sw a {
display: block;
text-align:center;
padding-bottom: 10px;
width: 100%;
background: #333b42;
color: #fff;
font-size: 10px;
padding: 1% 0 3% 0;
}