@charset "UTF-8";

/* common
---------------------------------------*/

.mg_center {
    margin-left: auto;
    margin-right: auto;
}
.center{ text-align: center!important; }
.right{ text-align: right!important; }
.left{ text-align: left!important; }

.fl_left { float: left; }
.fl_right { float: right; }
.cl_both { clear: both; }

.hide { display: none; }
.block { display: block; }
.inline { display: block; }

.alpha25 {
    filter: alpha(opacity=25);
    -moz-opacity:0.25;
    opacity:0.25;
}

.alpha50 {
    filter: alpha(opacity=50);
    -moz-opacity:0.50;
    opacity:0.50;
}

/*text
---------------------------------------*/
strong { font-weight: bold; }
.bold { font-weight: bold; }

/*text color
---------------------------------------*/
.white { color: #ffffff; }
.black { color: #000000; }
.gray { color: #999999; }
.red { color: #f84441; }
.blue { color: #0380f2; }
.yellow { color: #ffd200; }
.purple { color: #b487f9; }
.navy { color: #657bdc; }
.pink { color: #fd2178; }
.orange { color: #ff8400; }
.lightGreen { color: #99CC33; }
.lightBlue { color: #3366cc; }

/*font size
---------------------------------------*/
.fs10 { font-size:10px!important; }
.fs11 { font-size:11px!important; }
.fs12 { font-size:12px!important; }
.fs13 { font-size:13px!important; }
.fs14 { font-size:14px!important; }
.fs15 { font-size:15px!important; }
.fs16 { font-size:16px!important; }
.fs17 { font-size:17px!important; }
.fs18 { font-size:18px!important; }
.fs19 { font-size:19px!important; }
.fs20 { font-size:20px!important; }
.fs22 { font-size:22px!important; }
.fs24 { font-size:24px!important; }
.fs28 { font-size:28px!important; }
.fs30 { font-size:30px!important; }
.fs32 { font-size:32px!important; }
.fs36 { font-size:36px!important; }

/*line-height
---------------------------------------*/
.lh10 { line-height: 1em; }
.lh12 { line-height: 1.2em; }
.lh15 { line-height: 1.5em; }
.lh18 { line-height: 1.8em; }
.lh20 { line-height: 2.0em; }
.lh24 { line-height: 2.4em; }

/*space
---------------------------------------*/
.space3 { height:3px; }
.space5 { height:5px; }
.space10 { height:10px; }
.space15 { height:15px; }
.space20 { height:20px; }
.space25 { height:25px; }
.space30 { height:30px; }
.space40 { height:40px; }

/*margin
---------------------------------------*/
.mg5 { margin: 5px; }
.mg10 { margin: 10px; }
.md15 { margin: 15px; }
.mg20 { margin: 20px; }
.mg25 { margin: 25px; }
.mg30 { margin: 30px; }
.mg40 { margin: 40px; }

/*padding
---------------------------------------*/
.pd5 { padding: 5px; }
.pd10 { padding: 10px; }
.pd15 { padding: 15px; }
.pd20 { padding: 20px; }
.pd25 { padding: 25px; }
.pd30 { padding: 30px; }
.pd40 { padding: 40px; }

/*border
---------------------------------------*/
.bd_a{ border:1px solid #aaa; }
.bd_c{ border:1px solid #ccc; }
.bd_f{ border:1px solid #fff; }
.bd_top_c{ border-top:1px solid #ccc; }
.bd_bottom_c{ border-bottom:1px solid #ccc; }

/*background
---------------------------------------*/
.bg_white { background-color: #ffffff!important; }
.bg_black { background-color: #000000!important; }
.bg_blue { background-color: #0F60C4!important; }
.bg_greenLight { background-color: #bccd0f!important; }
.bg_orangeLight { background-color: #e55411!important; }
.bg_blueGray { background-color: #ccdddd!important; }
.bg_liteGray { background-color: #eeeeee!important; }
.bg_grad_DtoE {
    background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#eee));
    background: linear-gradient(top, #ddd, #eee);
}
.bg_grad_FtoC {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background: linear-gradient(top, #fff, #ccc);
}

/*buttons
---------------------------------------*/
.btn-gradient {
  color: white;
  padding: 8px 24px;
  border-radius: 4px;
  font-weight: bold;
  background: linear-gradient(#167FFB, #0F60C4);
  transition: background 0.3s ease;
  border: 1px solid #0F60C4;
}

.btn-gradient:hover {
  background: linear-gradient(#147EFF, #0F67DA);
  color: white;
}

/*shadow
---------------------------------------*/
.blur9 {
    box-shadow: 0px 0px 8px #999;
    -moz-box-shadow: 0px 0px 8px #999;
    -webkit-box-shadow: 0px 0px 8px #999;
}

.txt_shadow9 {
    text-shadow: 1px 1px 3px #999;
}

.box_shadowLT {
    box-shadow: 0px 1px 2px #666;
    -webkit-box-shadow: 0px 1px 2px #666;
    -moz-box-shadow: 0px 1px 2px #666;
}

.box_shadowDK {
    -moz-box-shadow: 1px 1px 3px #666;
    -webkit-box-shadow: 1px 1px 3px #666;
    box-shadow: 1px 1px 3px #666;
}

.box_shadow_inset {
    -moz-box-shadow: inset 1px 1px 3px #333;
    -webkit-box-shadow: inset 1px 1px 3px #333;
    box-shadow: inset 1px 1px 3px #333;
}

/*box
---------------------------------------*/
.radius8 {
    border-radius: 8px; 
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px; 
}

/* button
---------------------------------------*/
.btn.gray {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background: linear-gradient(top, #fff, #ccc);
    color: #444;
    text-shadow: 1px 1px 0px #ccc;
}

.btn.blue {
    background: -webkit-gradient(linear, left top, left bottom, from(#446da5), to(#2d4566));
    background: linear-gradient(top, #446da5, #2d4566);
    color:white;
    text-shadow: -1px -1px 0px #000;
}

.btn.green {
    background: -webkit-gradient(linear, left top, left bottom, from(#3fe8d3), to(#2c8f85));
    background: linear-gradient(top, #3fe8d3, #2c8f85);
    color:white;
    text-shadow: -1px -1px 0px #333;
}

.btn.red {
    background: -webkit-gradient(linear, left top, left bottom, from(#d90100), to(#870100));
    background: linear-gradient(top, #d90100, #870100);
    color:white;
    text-shadow: -1px -1px 0px #000;
}

.btn.black {
    background: -webkit-gradient(linear, left top, left bottom, from(#323232), to(#121212));
    background: linear-gradient(top, #323232, #121212);
    color:white;
    text-shadow: -1px -1px 0px #000;
}


/*transition
---------------------------------------*/
.default { -webkit-transition-timing-function: default; -moz-transition-timing-function: default; }
.linear { -webkit-transition-timing-function: linear; }
.ease-in { -webkit-transition-timing-function: ease-in; }
.ease-out { -webkit-transition-timing-function: ease-out; }
.ease-in-out { -webkit-transition-timing-function: ease-in-out; }
.cubic-bezier { -webkit-transition-timing-function: cubic-bezier(0,1,1,0); }

.transition {
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -o-transition: 1.5s;
    transition: 1.5s;
}

.fadein  {  
    -webkit-transition-property: background-image;  
    -webkit-transition-duration: 1.5s;  
    -webkit-transition-timing-function: linear;  
}  

/* Toggle(Button) */

#navToggle {
    display: none;
    position: absolute;
    /*to body*/
    right: 13px;
    top: 10px;
    width: 25px;
    height: 25px;
    cursor: pointer
}

#navToggle div {
    position: relative
}

#navToggle span {
    display: block;
    position: absolute;
    /*to div*/
    width: 100%;
    border-bottom: solid 3px #999;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out
}

#navToggle span:nth-child(1) {
    top: 2px
}

#navToggle span:nth-child(2) {
    top: 10px
}

#navToggle span:nth-child(3) {
    top: 18px
}

header #nav {
    min-height: 40px;
}

header nav {
    position: absolute;
    right: 0;
    top: -310px;
    /*通常時はビュー外*/
    background: rgba(99, 99, 99, .7);
    width: 50%;
    padding: 0 10px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    text-align: left
}

header ul {
    margin: 0
}

header ul li {
    display: block;
    margin: 0;
    border-bottom: dotted 1px #fff;
    line-height: 3
}

header ul li a {
    display: block;
    color: #fff !important;
}

header ul li::after {
    content: ''
}

header ul li:last-child {
    border-bottom: none
}

/* Toggle(Button) */

#navToggle {
    display: block
}

/* Click Toggle(Button) */

.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.openNav #navToggle span:nth-child(2), .openNav #navToggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg)
}

/*header menu*/

.openNav nav {
    -moz-transform: translateY(351px);
    -webkit-transform: translateY(351px);
    transform: translateY(351px)
}

.aquabit {
    color: #e83416;
}

* {
    box-sizing: content-box;
}

iframe {
    max-width: 100%;
}

/* all */

@font-face {
    font-family: 'Carrois Gothic';
    font-style: normal;
    font-weight: 400;
    src: local('Carrois Gothic'), local('CarroisGothic-Regular'), url(https://themes.googleusercontent.com/static/fonts/carroisgothic/v2/GCgb7bssGpwp7V5ynxmWy1munQUHE-w7pdt7tji1XYk.woff) format('woff');
}

body {
    -webkit-text-size-adjust: 100%;
    font-family: 'Carrois Gothic', 'Verdana', Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', san-serif;
    word-break: word-break;
    text-justify: newspaper;
    text-align: justify;
    color: #fff;
    height: 100%;
    background-color: #1e62f1;
}

a:link {
    text-decoration: none;
    color: #1d8ef6;
}

a:visited {
    text-decoration: none;
    color: #1d8ef6;
}

a:hover {
    text-decoration: none;
    color: #1d8ef6;
}

a:active {
    text-decoration: none;
    color: #1d8ef6;
}

input.textForm {
    font-size: 1.2em;
    border: solid 1px #ccc;
    width: 95%;
    padding: 3px;
}

/* header */
header {
    border-bottom: #fff solid 0px;
    background-color: #fff;
    text-align: center;
}

header .status {
    background-color: #000;
    background-size: 28px;
    width: 100%;
    height: 30px;
    font-size: 16px;
    /*  position: fixed; */
    clear: both;
}

header .status p {
    padding-top: 6px;
    padding-left: 40px;
    padding-right: 12px;
    font-weight: normal;
    text-align: left;
}

header .status a {
    background: url("../icon/68-paperclip@2x.png") no-repeat right top;
    background-size: 11px;
    display: block;
    float: right;
    padding-right: 17px;
    font-weight: normal;
}

header .statusMargin {
    width: 100%;
    /*  height: 30px; */
}

header img {
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

header .status a:link {
    text-decoration: none;
    color: #ffffff;
}

header .status a:visited {
    text-decoration: none;
    color: #ffffff;
}

header .status a:hover {
    text-decoration: none;
    color: #cccccc;
}

header .status a:active {
    text-decoration: none;
    color: #cccccc;
}

header .contents_title {
    width: 100%;
    color: #000;
}

.contents_title p {
    padding: 20px 15px;
    font-size: 2em;
    line-height: 1em;
    font-weight: bold;
}

table.icon {
    border: 5px #fff solid;
    margin: 10px auto;
    padding: 0px 0px;
    width: 96%;
}

table.icon td {
    border-right: 5px #fff solid;
    border-bottom: 1px #fff solid;
    margin: 0px 0px;
    padding: 0px 0px;
    text-align: center;
    width: 50%;
    vertical-align: middle;
    line-height: 1.2em;
    box-sizing: content-box !important;
    background: #bccd0f;
}

table.icon td.txtL {
    border-right: 1px #1d8ef6 solid;
    background-color: #fff;
    color: #858585;
    padding: 9px 9px;
}

table.icon td.txtR {
    background-color: #fff;
    color: #858585;
    padding: 3px 3px;
}

table.icon td img {
    width: 45%;
    padding: 15%;
}

table.icon td img.custom-icon {
    width: 100%;
    padding: 0px;
    margin-bottom: -5px;
}

table.icon td img.wide {
    width: 25%;
    padding: 5%;
}

table.icon td img.wide.custom-icon {
    width: 100%;
    padding: 0%;
}

table.icon td a:hover {
    filter: alpha(opacity=50);
    -moz-opacity: 0.50;
    opacity: 0.50;
}

table.icon td a:active {
    filter: alpha(opacity=50);
    -moz-opacity: 0.50;
    opacity: 0.50;
}

footer {
    width: 100%;
    color: #fff;
    border-top: #fff solid 1px;
    text-align: center;
    margin: 0;
    margin-top: 1em;
    line-height: 3.2em;
    padding-top: 5px;
}

footer p {
    font-size: 1.6em;
}

footer a:link {
    text-decoration: underline;
    color: #fff;
}

footer a:visited {
    text-decoration: underline;
    color: #fff;
}

footer a:hover {
    text-decoration: underline;
    color: #fff;
}

footer a:active {
    text-decoration: underline;
    color: #fff;
}

nav {
    float: right;
    text-align: right;
    vertical-align: bottom;
}

header ul {
    font-size: 13px;
    line-height: 1;
    margin: 0 10px 10px 0;
}

header ul li {
    margin-top: 10px;
    margin-left: 3px;
    display: inline-block;
}

header ul li::after {
    content: ' |';
}

header ul li a:hover {
    color: #c00;
    text-decoration: underline;
}

.navbar-brand {
    float: left;
    height: 30px;
    padding: 5px 15px;
}

.promo {
    background-color: #18B1F9;
}

.promo, .promo-body {
    overflow: hidden;
    zoom: 1;
    display: flex;
    align-items: center;
}

.promo-body, .promo-left, .promo-right {
    display: table-cell;
    vertical-align: middle;
}

.promo-left {
    float: left;
}

.promo-left, .promo-right {
    padding: 5px 10px;
}

.promo-object {
    display: block;
}

.promo-body {
    font-size: 13px;
    text-align: left;
    line-height: 1.5;
    float: left;
    width: calc(100% - 125px);
}

.promo-right {
    width: 55px;
    float: right;
}

.promo-right .btn {
    background-color: #fff;
    padding: 5px 13px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

/****************************/
/*----- Contract Section -----*/
/****************************/
.contract-area {
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.68);
    text-align: center;
    color: white;
    position: fixed;
    bottom: 0px;
    left: 0px;
    line-height: 0px;
    display: none;
}

#agree {
    width: 40%;
}

#disagree {
    width: 40%;
}

table.icon td img {
    /* width: 75%; */
}

/*LAlert
---------------------------------------*/

.l-alert {
    box-sizing: border-box;
    background-color: red;
    color: white;
    font-size: 4vw;
    padding: 1vh 5vw;
    width: 100%;
    display: none;
    line-height: initial;
}

.l-alert h3 {
    font-weight: bold;
    animation: l-alert-flash 1s infinite alternate;
}

.l-alert p {
    font-size: 3.5vw;
}

.l-alert p.alert-row {
    color: white;
}

.l-alert a {
    color: yellow;
}

@keyframes l-alert-flash {
    0% {
        color: rgb(248, 182, 182)
    }
    100% {
        color: yellow
    }
}