@charset "utf-8";


h1, h2, h3, h4, h5, h6, p, form {
margin: 0px;
padding: 0px;
}
dl, dt, dd {
margin: 0px;
padding: 0px;
}
li, ul, ol {
margin: 0px;
padding: 0px;
list-style-type: none;
}
table {
border-collapse:collapse;
}
img {
max-width: 100%;
margin:0;
padding:0;
vertical-align:bottom;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
a {
color: #005aff;
}
a:hover {
color: #ff9f00;
}
/* +++++ Style for float clear +++++ */
.clearfix:after {
content: ".";
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
font-size: 0.1em;
line-height:0;
}
.clearfix {
display: inline-table;
min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* +++++ Style for float clear +++++ */
.clear {
clear: both;
margin: 0px;
padding: 0px;
}
.px10 {
font-size: 10px;
}
.px11 {
font-size: 11px;
}
.px12 {
font-size: 12px;
}
.px14 {
font-size: 14px;
}
.px16 {
font-size: 16px;
}
.px18 {
font-size: 18px;
}
.px20 {
font-size: 20px;
}
.px22 {
font-size: 22px;
}
.px24 {
font-size: 24px;
}
.px30 {
font-size: 30px;
}
.px36 {
font-size: 36px;
}
.b {
font-weight: bold;
}
.black {
color: #000;
}
.gray01 {
color: #666;
}
.gray02 {
color: #999;
}
.red {
color: #F00;
}
.dark_red {
color: #C00;
}
.blue {
color: #00F;
}
.light_blue {
color: #09F;
}
.green {
color: #090;
}
.dark_green {
color: #030;
}
.orenge01 {
color: #F90;
}
.orange02 {
color: #F60;
}
.brown {
color: #502601;
}
.purple {
color: #639;
}
.marker {
background-color: #f0ff00;
}

/*SP版の画像幅制御*/
.max100 {
max-width:100%;
}
.max90 {
max-width:90%;
}
.max80 {
max-width:80%;
}
.max70 {
max-width:70%;
}
.max60 {
max-width:60%;
}
.max50 {
max-width:50%;
}
.max40 {
max-width:40%;
}
.max30 {
max-width:30%;
}
.max20 {
max-width:20%;
}
.max10 {
max-width:10%;
}
.w100 {
width:100%;
}
.w90 {
width:90%;
}
.w80 {
width:80%;
}
.w70 {
width:70%;
}
.w60 {
width:60%;
}
.w50 {
width:50%;
}
.w40 {
width:40%;
}
.w30 {
width:30%;
}
.w20 {
width:20%;
}
.w10 {
width:10%;
}



@media screen and (max-width: 979px) {/*SP*/
.pc {
display: none;
}
header p.alc_bnr {
display: none;
}
img {
max-width: 100%;
}
span.br:before{
content:'\A';
white-space: pre ;
}
div.t_scroll{
width:100%;
padding:0;
margin:0 auto 0 auto;
overflow-x: scroll;
}
div.t_scroll::before{
content: '左右にスクロール可能です';
color: #f00;
}
body {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 180%;
color: #000;
text-align: center;
margin: 0px;
padding: 0px;
}
div#wrapper {
text-align: left;
width: 100%;
}
div#container {
}
h2 {
font-size: 18px;
color: #1d2088;
font-weight: bold;
border: #1d2088 1px solid;
background: #eee;
text-align: center;
padding: 8px 0;
margin: 0 0 50px 0;
}
span.tall_free {
background: url(../images/logo_free.png) left center no-repeat;
padding: 2px 0 2px 45px;
height: 24px;
margin: 3px 0 6px 10px;
}
span.tel_no {
padding: 2px 0 2px 0;
font-size: 130%;
font-weight: bold;
margin: 3px 0 6px 0;
}
span.logo::before {
content: "";
display: inline-block;
background: url("../images/logo_kitaro.png") no-repeat;
background-size: auto 27px;
background-position: left 0 top 3px;
width: 120px;
height: 30px;
vertical-align: text-top;
}
p.page_back {
text-align: right;
padding:0;
margin: 0 0 60px 0;
}
p.page_back a {
text-decoration: underline!important;
color: #CC0000 !important;
}
p.page_back a:hover {
text-decoration: none!important;
color: #ff8400 !important;
}

/*メニューバー*/
.g_menu {
display : block;
position: fixed;
z-index : 130;
right : 13px;
top : 12px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
background: #000096;
border-radius: 5px;
}
.g_menu span {
display : block;
position: absolute;
width : 30px;
height: 2px ;
left: 6px;
background : #fff;
-webkit-transition: 0.3s ease-in-out;
-moz-transition : 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.g_menu span:nth-child(1) {
top: 10px;
}
.g_menu span:nth-child(2) {
top: 20px;
}
.g_menu span:nth-child(3) {
top: 30px;
}

/* ナビ開いてる時のボタン */
.g_menu.active span:nth-child(1) {
top : 20px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform : rotate(-45deg);
transform: rotate(-45deg);
background: #fff;
}

.g_menu.active span:nth-child(2),
.g_menu.active span:nth-child(3) {
top: 20px;
-webkit-transform: rotate(45deg);
-moz-transform : rotate(45deg);
transform: rotate(45deg);
background: #fff;
}

nav.sp_navi {
position: fixed;
z-index : 110;
top: 0;
right : 0;
bottom: 0;
color: #000;
text-align: left;
transform: translateX(100%);
transition: all 0.6s;
width: 280px;
padding: 0 10px;
overflow-y: auto;
background: #000096;
opacity: 0.95;
}
nav.sp_navi ul {
margin: 80px auto 0 auto;
padding: 0;
width: 100%;
}
nav.sp_navi ul li {
border-bottom: 1px solid #fff;
text-decoration :none;
}
nav.sp_navi ul li a {
position: relative;
display: block;
text-decoration: none;
color: #fff;
padding: 12px 0 8px 20px;
}
nav.sp_navi ul li a::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f0da';
font-size: 15px;
color: #fff;
position: absolute;
width: 15px;
height: 15px;
top: 12px;
left: 8px;
margin: auto;
}
nav.sp_navi ul ul {
margin: 0 auto;
}
nav.sp_navi ul ul li {
padding-left: 15px;
}
nav.sp_navi ul ul li:last-child {
border-bottom: none;
}
nav.sp_navi ul ul li a {
padding: 8px 0 6px 20px;
}
nav.sp_navi ul ul li a::before {
color: #fff100;
top: 8px;
left: 6px;
}




/* このクラスを、jQueryで付与・削除する */
nav.sp_navi.active {
transform: translateY(0%);
}

.pc_navi {
display : none;
}

header {
width: 100%;
margin: 0 auto;
padding: 10px 0;
border-bottom: #000096 5px solid;
background: linear-gradient(0deg, #eee, #fff);
height:45px;
}
header h1.logo {
max-width: 65%;
margin: 8px 0 0 10px;
}
header h1.logo img {
max-width: 100%;
max-height: 45px;
}

div.page_navi {
width: calc(96% - 30px);
background: #eeeef6;
border-radius: 10px;
padding: 10px 15px 0 15px;
margin: 15px auto;
}
div.page_navi ul {
margin:0;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
div.page_navi li {
width:49%;
margin:0 1% 5px 0;
padding:0;
}
div.page_navi li a {
display: block;
position: relative;
color: #333;
text-decoration: none;
padding: 0 0 5px 20px;
}
div.page_navi li a::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f152';
font-size: 15px;
color: #333;
position: absolute;
width: 15px;
height: 15px;
top: 0;
left: 0;
margin: auto;
}
div.page_navi li a:hover {
color: #CC0000;
text-decoration: underline;
}
div.page_navi li a:hover::before {
color: #CC0000;
}

div#other_service {
width: 96%;
margin:25px auto;
padding:0;
}
div#other_service h2 {
font-size: 18px;
color: #000;
font-weight: bold;
border: #333 1px solid;
background: #eee;
text-align: center;
padding: 6px 5px 4px 5px;
margin: 0 0 25px 0;
}
div#other_service ul {
margin:0;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
div#other_service li {
width:49%;
margin:0 2% 10px 0;
padding:0;
}
div#other_service li:nth-child(2n) {
margin:0;
}
div#other_service li img {
width:100%;
}

div#footer {
width: 100%;
margin: 0 auto;
padding: 15px 0;
background: #000096;
}
div#footer p {
text-align: center;
color: #fff;
}

div.catch {
background: url("../images/pattern.png") left top repeat;
margin: 0 auto 25px auto;
}
div.catch .main_image {
width: 100%;
margin: 0 auto;
}
div.catch .main_image p {
position: relative;
padding-top: 47.37%;
}
div.catch .main_image img {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.msg {
width: 98%;
margin:0 auto 60px auto;
line-height: 1.5;
}

div.lead {
width: 98%;
margin: 0 auto 60px auto;
}
div.lead ul {
display: flex;
flex-wrap:wrap;
margin: 0;
padding: 0 0 45px 0;
}
div.lead li {
width: 100%;
margin: 0 0 30px 0;
}
div.lead dt {
margin: 0 0 15px 0;
border-left: #1d2088 5px solid;
padding: 4px 0 5px 8px;
font-weight: 800;
color: #1d2088;
font-size: 130%;
}
div.lead dd {
margin: 0;
padding: 0;
}
div.lead dd img {
float: left;
width: 100px;
margin: 0 10px 10px 0
}

div.movie {
width: 98%;
margin: 0 auto 60px auto;
}
div.mov {
width: 100%;
position: relative;
padding-top: 56.25%;
}
div.mov iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

div.aws {
width: 98%;
margin: 0 auto 60px auto;
line-height: 1.4;
}
div.aws img {
max-width: 100%;
margin: 0 auto 20px auto;
}

div.merit {
width: 98%;
margin: 0 auto 60px auto;
}
div.merit ul {
display: flex;
flex-wrap:wrap;
margin: 0;
padding: 0;
}
div.merit li {
width: calc(100% - 28px);
margin: 0 0 30px 0;
border: #5658a5 4px solid;
border-radius: 10px;
padding: 10px;
}

div.merit dt {
margin: 0 0 15px 0;
padding: 0 0 0 30px;
font-weight: 800;
color: #000;
font-size: 140%;
background: url("../images/ico_logo.png") left 0 top 3px no-repeat;
background-size: 26px auto;
min-height: 35px;
}
div.merit dd {
margin: 0;
padding: 0;
font-size: 120%;
line-height: 1.4;
}
div.merit dd img {
float: right;
width: 180px;
margin: -35px 10px 10px 0
}

ul.cta {
width: 80%;
max-width: 420px;
position: relative;
margin:40px auto 60px auto;
padding:0;
display:flex;
flex-wrap:wrap;
line-height: 1.4;
}
ul.cta li {
width:100%;
margin:0 auto 10px auto;
padding:0;
}
ul.cta span {
display: block;
width: 100%;
text-align: center;
font-size: 80%;
color: #c00;
padding: 0;
}
ul.cta li a {
width:100%;
height: 45px;
display:flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 23px;
text-decoration: none;
text-align: center;
font-size: 110%;
background: #ff6900;
font-weight: 400;
color: #fff;
border: #fff 2px solid;
box-shadow: 0 0 2px #999;
}
ul.cta li a:hover {
color: #000;
background: #ffd800;
}

div.device {
width: 98%;
margin: 0 auto 60px auto;
position: relative;
overflow-x: scroll;
}
div.device::before{
content: '左右にスクロール可能です';
color: #f00;
}
div.device img.free_1month {
display: none;
}
span.free_1month_sp {
display: block;
background: #fff;
border: #f00 3px double;
padding: 3px 2px;
margin: 8px 0 0 10px;
color: #f00;
font-weight: bold;
position:absolute;
top: 0;
z-index: 10;
}
div.device table {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
margin: 25px auto 30px auto;
border-radius: 17px;
border: #999 1px solid;
line-height: 1.3;
}
div.device table th,
div.device table td {
border-bottom: #999 1px solid;
}

div.device table th {
background: #5658a5;
color: #fff;
padding: 15px 5px;
text-align: center;
vertical-align: middle;
font-weight: normal;
white-space: nowrap;
}
div.device table td {
border-left: #999 1px solid;
padding: 15px 10px;
vertical-align: middle;
}
div.device table tr td:first-child img {
min-width: 140px;
margin: 0 0 15px 0
}
div.device table tr td:first-child span {
font-size: 120%;
line-height: 1.8;
}
div.device table tr:last-child th,
div.device table tr:last-child td {
border-bottom: none;
}
div.device table tr:nth-child(1) th:first-child,
div.device table tr:nth-child(2) td:first-child,
div.device table tr:nth-child(4) td:first-child,
div.device table tr:nth-child(6) td:first-child,
div.device table tr:nth-child(7) td:first-child {
border-left: none;
}
div.device table tr:nth-child(7) td {
border-bottom: none;
}
div.device table tr:last-child td {
border-top: #999 1px solid;
}
div.device table td:nth-child(n + 2) {
white-space: nowrap;
}
div.device p.prc {
margin: 0 0 15px 0;
line-height: 1.2;
}
div.device p.device_type {
margin: 0;
font-size: 120%;
line-height: 1.2;
}
div.device p.prc:last-child {
margin: 0;
}
span.wtax {
font-size: 80%;
}

p.tel_contact {
font-size: 120%;
text-align: center;
margin: 20px 0 40px 0;
line-height: 1.6;
}

div.panel {
width: 98%;
margin: 0 auto 60px auto;
}
div.panel ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
div.panel ul li {
width: 100%;
margin: 0 0 25px 0;
}
div.panel dt {
background: #000096;
color: #fff;
font-size: 120%;
font-weight: 400;
padding: 4px 5px;
margin: 0 0 10px 0;
}
div.panel dd {
padding: 4px 5px 30px 5px;
margin: 0 0 10px 0;
border-bottom: #666 1px dotted;
}
div.panel dd img {
width: 100%;
margin: 0 0 20px 0;
}

div.function {
width: 98%;
margin: 0 auto 60px auto;
}
div.function ul {
display: flex;
flex-wrap:wrap;
margin: 0;
padding: 0;
}
div.function li {
width: 49%;
margin: 0 2% 30px 0;
padding: 0;
}
div.function li:nth-child(2n) {
margin: 0 0 30px 0;
}
div.function dt {
margin: 0 0 10px 0;
padding: 0 0 0 22px;
font-weight: 800;
color: #5658a5;
font-size: 110%;
background: url("../images/ico_logo.png") left 0 top 4px no-repeat;
background-size: 20px auto;
min-height: 24px;
}
div.function dd {
margin: 0;
padding: 0;
line-height: 1.4;
font-size: 95%;
}
div.function dd img {
float: right;
width: 90px;
margin: -5px 0 0 0
}

div.alcohol-chk {
width: 98%;
margin: 0 auto 60px auto;
}
div.alcohol-chk h3 {
margin: 0 auto 20px auto;
font-size: 1.6rem;
font-weight: bold;
text-align: center;
color: #fff;
background: #000096;
padding: 8px 0;
}
div.alcohol-chk div.ttl {
text-align: center;
margin: 0 0 20px 0;
font-size: 1.3rem;
color: #1d2088;
font-weight: bold;
line-height: 1.4;
}
div.alcohol-chk div.ttl img {
margin: 0 0 10px 0;
}
div.alcohol-chk div.docs {
display: flex;
flex-wrap: wrap;
margin: 0 0 25px 0;
}
div.alcohol-chk div.docs p:first-child {
width: 100%;
margin: 0 0 15px 0;
}
div.alcohol-chk ul.items {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0 auto 40px auto;
}
div.alcohol-chk ul.items li {
width: 100%;
margin: 0 0 40px 0;
}
div.alcohol-chk div.pics {
width: 70%;
position: relative;
margin: 0 auto 10px auto;
}
div.alcohol-chk ul.items li:first-child div.pics {
margin: 120px auto 10px auto;
}
div.alcohol-chk div.pics .notice {
position: absolute;
top: -100px;
left: -14%;
display: inline-block;
margin-bottom: 20px;
padding: 20px 30px;
border: 2px solid #000000;
border-radius: 9999px;
background-color: #ffe7e8;
text-align: center;
font-size: 19px;
font-weight: 800;
line-height: 1.5;
color: #000000;
}
div.alcohol-chk div.pics .notice::before {
content: "";
position: absolute;
bottom: 0;
left: 60%;
border-style: solid;
border-width: 47px 10px 0 10px;
border-color: #000000 transparent transparent;
translate: -50% 100%;
transform: skew(7deg);
transform-origin: top;
}
div.alcohol-chk div.pics .notice::after {
content: "";
position: absolute;
bottom: 0;
left: 60%;
border-style: solid;
border-width: 37.4px 8px 0 8px;
border-color: #ffe7e8 transparent transparent;
translate: -50% 100%;
transform: skew(7deg);
transform-origin: top;
}
div.alcohol-chk div.dtls p.name {
color: #00327d;
font-weight: bold;
margin: 0 0 10px 0;
text-align: center;
}
div.alcohol-chk div.dtls p.catch {
color: #666666;
margin: 0 0 10px 0;
line-height: 1.4;
}
div.alcohol-chk div.dtls p.price {
margin: 0 0 20px 0;
text-align: center;
}
div.alcohol-chk div.dtls p.price span {
color: #CC0000;
font-size: 1.8rem;
font-weight: bold;
}
div.alcohol-chk div.dtls p.btn {
width: 70%;
margin: 0 auto;
}
div.alcohol-chk div.dtls p.btn a {
display: flex;
justify-content: center;
align-items: center;
background: #004ddb;
border: #fff 4px solid;
border-radius: 20px;
box-shadow: 0 0 5px #999;
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 4px 0;
}
div.alcohol-chk div.dtls p.btn a:hover {
background: #005aff;
color: #fff100;
}
}


@media screen and (min-width: 980px) {/*PC*/
.sp {
display: none;
}
body {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 110%;
line-height: 180%;
color: #000;
text-align: center;
margin: 0px;
padding: 0px;
}
div#wrapper {
text-align: left;
width: 100%;
}
div#container {

}
h2 {
font-size: 32px;
color: #1d2088;
font-weight: bold;
border: #1d2088 1px solid;
background: #eee;
text-align: center;
padding: 8px 0;
margin: 0 0 50px 0;
}
span.tall_free {
background: url(../images/logo_free.png) left center no-repeat;
padding: 2px 0 2px 45px;
height: 24px;
margin: 3px 0 6px 10px;
}
span.tel_no {
padding: 2px 0 2px 0;
font-size: 130%;
font-weight: bold;
margin: 3px 0 6px 0;
}
span.logo::before {
content: "";
display: inline-block;
background: url("../images/logo_kitaro.png") no-repeat;
background-size: auto 40px;
background-position: left 0 top 5px;
width: 180px;
height: 45px;
vertical-align: text-top;
}
p.page_back {
text-align: right;
padding:0;
margin: 0 0 60px 0;
}
p.page_back a {
text-decoration: underline!important;
color: #CC0000 !important;
}
p.page_back a:hover {
text-decoration: none!important;
color: #ff8400 !important;
}
.g_menu {
display : none;
}
nav.sp_navi {
display : none;
}
header {
width: 980px;
margin: 0 auto 15px auto;
min-height: 100px;
}
header h1.logo {
float: left;
margin: 20px 0 0 0;
}
header p.alc_bnr {
float: right;
margin: 30px 0 0 0;
}
nav.pc_navi {
width: 100%;
height: 45px;
margin: 0 auto;
background: #000096;
}
nav.pc_navi ul {
width: 978px;
height: 45px;
border-right: #fff 1px solid;
border-left: #fff 1px solid;
margin:0 auto;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
nav.pc_navi li {
width:163px;
margin:0;
line-height: 1.0;
}
nav.pc_navi li a {
height: 30px;
padding: 15px 0 0 0;
background: #000096;
border-right: #fff 1px solid;
color: #fff;
text-align: center;
text-decoration: none;
display: block;
}
nav.pc_navi li:last-child a {
border-right: none;
}

nav.pc_navi li a:hover {
background: #0000d1;
color: #fff100;
}

div.page_navi {
width: 850px;
background: #eeeef6;
border-radius: 20px;
padding: 35px 45px 10px 45px;
margin: 30px auto;
}
div.page_navi ul {
margin:0;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
div.page_navi li {
width:24%;
margin:0 1% 25px 0;
padding:0;
}
div.page_navi li a {
display: block;
position: relative;
color: #333;
text-decoration: none;
padding: 5px 0 0 30px;
}
div.page_navi li a::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f152';
font-size: 25px;
color: #333;
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
div.page_navi li a:hover {
color: #CC0000;
text-decoration: underline;
}
div.page_navi li a:hover::before {
color: #CC0000;
}

div#other_service {
width: 980px;
margin:45px auto;
padding:0;
}
div#other_service h2 {
font-size: 22px;
color: #000;
font-weight: bold;
border: #333 1px solid;
background: #eee;
text-align: center;
padding: 8px 5px 5px 5px;
margin: 0 0 35px 0;
}
div#other_service ul {
margin:0 0 0 10px;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
div#other_service li {
width:23%;
margin:0 2% 8px 0;
padding:0;
}
div#other_service li img {
width:100%;
}

div#footer {
width: 100%;
margin: 0 auto;
padding: 30px 0;
background: #000096;
}
div#footer p {
text-align: center;
color: #fff;
}

div.catch {
background: url("../images/pattern.png") left top repeat;
margin: 0 auto 25px auto;
}
div.catch .main_image {
max-width: 1400px;
min-width: 980px;
margin: 0 auto;
}
div.catch .main_image p {
position: relative;
padding-top: 47.37%;
}
div.catch .main_image img {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.msg {
width: 900px;
margin:0 auto 60px auto;
line-height: 1.5;
}

div.lead {
width: 980px;
margin: 0 auto 60px auto;
}
div.lead ul {
display: flex;
flex-wrap:wrap;
margin: 0;
padding: 0 0 45px 0;
}
div.lead li {
width: 45%;
margin: 0 10% 30px 0;
}
div.lead li:nth-child(2n) {
margin: 0 0 30px 0;
}
div.lead li:last-child {
width: 100%;
margin: 0;
}
div.lead dt {
margin: 0 0 15px 0;
border-left: #1d2088 5px solid;
padding: 4px 0 5px 8px;
font-weight: 800;
color: #1d2088;
font-size: 130%;
}
div.lead dd {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
div.lead dd p:first-child {
width: 100px;
margin: 0;
padding: 0 10px 0 0;
}
div.lead dd p:nth-child(2) {
width: calc(100% - 110px);
margin: 0;
padding: 0;
}
/*div.lead dd img {
float: left;
width: 100px;
margin: 0 10px 10px 0
}*/

div.movie {
width: 650px;
margin: 0 auto 60px auto;
}
div.mov {
width: 100%;
position: relative;
padding-top: 56.25%;
}
div.mov iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

div.aws {
width: 800px;
margin: 0 auto 60px auto;
font-size: 110%;
}
div.aws img {
width: 100%;
margin: 0 auto 20px auto;
}

div.merit {
width: 980px;
margin: 0 auto 60px auto;
}
div.merit ul {
display: flex;
flex-wrap:wrap;
margin: 0;
padding: 0;
}
div.merit li {
width: calc(48% - 28px);
margin: 0 4% 30px 0;
border: #5658a5 4px solid;
border-radius: 10px;
padding: 10px;
}
div.merit li:nth-child(2n) {
margin: 0 0 30px 0;
}
div.merit dt {
margin: 0 0 15px 0;
padding: 0 0 0 35px;
font-weight: 800;
color: #000;
font-size: 160%;
background: url("../images/ico_logo.png") left 0 top 1px no-repeat;
background-size: 30px auto;
min-height: 35px;
}
div.merit dd {
margin: 0;
padding: 0;
font-size: 140%;
line-height: 1.6;
}
div.merit dd img {
float: right;
width: 180px;
margin: -35px 10px 10px 0
}

ul.cta {
width: 500px;
position: relative;
margin:40px auto 60px auto;
padding:0;
display:flex;
flex-wrap:wrap;
}
ul.cta li {
width:420px;
margin:0 auto 10px auto;
padding:0;
}
ul.cta span {
display: block;
width: 100%;
text-align: center;
font-size: 80%;
color: #c00;
padding: 0;
}
ul.cta li a {
width:100%;
height: 45px;
display:flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 23px;
text-decoration: none;
text-align: center;
font-size: 140%;
background: #ff6900;
font-weight: 400;
color: #fff;
border: #fff 2px solid;
box-shadow: 0 0 2px #999;
}
ul.cta li a:hover {
color: #000;
background: #ffd800;
}

div.device {
position: relative;
width: 1100px;
margin: 100px auto 60px auto;
}
div.device img.free_1month {
position: absolute;
width: 230px;
top: -170px;
right: 5px;
}
div.device table {
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
margin: 30px auto;
border-radius: 17px;
border: #999 1px solid;
line-height: 1.3;
}
div.device table th,
div.device table td {
border-bottom: #999 1px solid;
}

div.device table th {
background: #5658a5;
color: #fff;
padding: 15px 5px;
text-align: center;
vertical-align: middle;
font-weight: normal;
white-space: nowrap;
}
div.device table td {
border-left: #999 1px solid;
padding: 15px 10px;
vertical-align: middle;
}
div.device table tr td:first-child img {
width: 180px;
margin: 0 0 15px 0
}
div.device table tr td:first-child span {
font-size: 120%;
line-height: 1.8;
}
div.device table tr td:first-child img.thumb {
float: right;
width: 100px;
margin: -20px 0 0 10px;
}
div.device table tr:last-child th,
div.device table tr:last-child td {
border-bottom: none;
}
div.device table tr:nth-child(1) th:first-child,
div.device table tr:nth-child(2) td:first-child,
div.device table tr:nth-child(4) td:first-child,
div.device table tr:nth-child(6) td:first-child,
div.device table tr:nth-child(7) td:first-child {
border-left: none;
}
div.device table tr:nth-child(7) td {
border-bottom: none;
}
div.device table tr:last-child td {
border-top: #999 1px solid;
}
div.device table td:nth-child(n + 2) {
white-space: nowrap;
}
div.device p.prc {
margin: 0 0 15px 0;
line-height: 1.2;
}
div.device p.device_type {
margin: 0 0 15px 0;
font-size: 120%;
line-height: 1.2;
}
div.device p.prc:last-child {
margin: 0;
}
span.wtax {
font-size: 90%;
}
span.free_1month_sp {
display: none;
}

p.tel_contact {
font-size: 140%;
text-align: center;
margin: 20px 0 40px 0;
line-height: 1.6;
}

div.panel {
width: 980px;
margin: 0 auto 60px auto;
}
div.panel ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
div.panel ul li {
width: 48%;
margin: 0 4% 25px 0;
}
div.panel ul li:nth-child(2n) {
margin: 0 0 25px 0;
}
div.panel dt {
background: #000096;
color: #fff;
font-size: 120%;
font-weight: 400;
padding: 4px 5px;
margin: 0 0 10px 0;
}
div.panel dd {
padding: 4px 5px 30px 5px;
margin: 0 0 10px 0;
border-bottom: #666 1px dotted;
}
div.panel dd img {
width: 100%;
margin: 0 0 20px 0;
}

div.function {
width: 980px;
margin: 0 auto 60px auto;
}
div.function ul {
display: flex;
flex-wrap:wrap;
margin: 0;
padding: 0;
}
div.function li {
width: 31%;
margin: 0 3.5% 30px 0;
padding: 0;
}
div.function li:nth-child(3n) {
margin: 0 0 30px 0;
}
div.function dt {
margin: 0 0 10px 0;
padding: 0 0 0 32px;
font-weight: 800;
color: #5658a5;
font-size: 130%;
background: url("../images/ico_logo.png") left 0 top 2px no-repeat;
background-size: 28px auto;
min-height: 32px;
}
div.function dd {
margin: 0;
padding: 0;
line-height: 1.4;
}
div.function dd img {
float: right;
width: 140px;
margin: -35px 10px 10px 0
}

div.alcohol-chk {
width: 980px;
margin: 0 auto 60px auto;
}
div.alcohol-chk h3 {
margin: 0 auto 30px auto;
font-size: 1.6rem;
font-weight: bold;
width: 90%;
text-align: center;
color: #fff;
background: #000096;
padding: 8px 0;
}
div.alcohol-chk div.ttl {
text-align: center;
margin: 0 0 30px 0;
font-size: 1.8rem;
color: #1d2088;
font-weight: bold;
line-height: 1.4;
}
div.alcohol-chk div.ttl img {
margin: 0 0 20px 0;
}
div.alcohol-chk div.docs {
display: flex;
flex-wrap: wrap;
margin: 0 0 45px 0;
}
div.alcohol-chk div.docs p:first-child {
width: 70%;
margin: 0 auto 35px auto;
}
div.alcohol-chk ul.items {
width: 80%;
display: flex;
flex-wrap: wrap;
margin: 0 auto 40px auto;
}
div.alcohol-chk ul.items li {
width: 46%;
margin: 0 8% 0 0;
}
div.alcohol-chk ul.items li:nth-child(2n) {
margin: 0;
}
div.alcohol-chk div.pics {
position: relative;
margin: 0 0 15px 0;
}
div.alcohol-chk div.pics .notice {
position: absolute;
top: -100px;
left: -80px;
display: inline-block;
margin-bottom: 20px;
padding: 20px 30px;
border: 2px solid #000000;
border-radius: 9999px;
background-color: #ffe7e8;
text-align: center;
font-size: 19px;
font-weight: 800;
line-height: 1.5;
color: #000000;
}
div.alcohol-chk div.pics .notice::before {
content: "";
position: absolute;
bottom: 0;
left: 60%;
border-style: solid;
border-width: 47px 10px 0 10px;
border-color: #000000 transparent transparent;
translate: -50% 100%;
transform: skew(7deg);
transform-origin: top;
}
div.alcohol-chk div.pics .notice::after {
content: "";
position: absolute;
bottom: 0;
left: 60%;
border-style: solid;
border-width: 37.4px 8px 0 8px;
border-color: #ffe7e8 transparent transparent;
translate: -50% 100%;
transform: skew(7deg);
transform-origin: top;
}
div.alcohol-chk div.dtls p.name {
color: #00327d;
font-weight: bold;
margin: 0 0 10px 0;
text-align: center;
}
div.alcohol-chk div.dtls p.catch {
color: #666666;
margin: 0 0 10px 0;
line-height: 1.4;
min-height: 6.3em;
}
div.alcohol-chk div.dtls p.price {
margin: 0 0 20px 0;
text-align: center;
}
div.alcohol-chk div.dtls p.price span {
color: #CC0000;
font-size: 1.8rem;
font-weight: bold;
}
div.alcohol-chk div.dtls p.btn {
width: 70%;
margin: 0 auto;
}
div.alcohol-chk div.dtls p.btn a {
display: flex;
justify-content: center;
align-items: center;
background: #004ddb;
border: #fff 4px solid;
border-radius: 20px;
box-shadow: 0 0 5px #999;
color: #fff;
font-weight: bold;
text-decoration: none;
}
div.alcohol-chk div.dtls p.btn a:hover {
background: #005aff;
color: #fff100;
}
}

@media screen and (min-width: 980px) and (max-width: 1100px) {
div.device {
position: relative;
width: 100%;
margin: 100px auto 60px auto;
}
div.device img.free_1month {
position: absolute;
width: 230px;
top: -170px;
right: 5px;
}
div.device table {
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
margin: 30px auto;
border-radius: 17px;
border: #999 1px solid;
line-height: 1.3;
}
div.device table th,
div.device table td {
border-bottom: #999 1px solid;
}

div.device table th {
background: #5658a5;
color: #fff;
padding: 15px 5px;
text-align: center;
vertical-align: middle;
font-weight: normal;
white-space: nowrap;
}
div.device table td {
border-left: #999 1px solid;
padding: 15px 10px;
vertical-align: middle;
font-size: 0.95rem;
}
div.device table tr td:first-child img {
width: 180px;
margin: 0 0 15px 0
}
div.device table tr td:first-child span {
font-size: 120%;
line-height: 1.8;
}
div.device table tr td:first-child img.thumb {
float: right;
width: 100px;
margin: -20px 0 0 10px;
}
div.device table tr:last-child th,
div.device table tr:last-child td {
border-bottom: none;
}
div.device table tr:nth-child(1) th:first-child,
div.device table tr:nth-child(2) td:first-child,
div.device table tr:nth-child(4) td:first-child,
div.device table tr:nth-child(6) td:first-child {
border-left: none;
}
div.device table tr:nth-child(6) td {
border-bottom: none;
}
div.device table tr:last-child td {
border-top: #999 1px solid;
}
div.device table td:nth-child(n + 2) {
white-space: nowrap;
}
div.device p.prc {
margin: 0 0 15px 0;
line-height: 1.2;
}
div.device p.device_type {
margin: 0 0 15px 0;
font-size: 120%;
line-height: 1.2;
}
div.device p.prc:last-child {
margin: 0;
}
span.wtax {
font-size: 90%;
}
}

.page_top{
width: 50px;
height: 50px;
position: fixed;
right: 10px;
bottom: 20px;
background: #000096;
opacity: 0.9;
border: #fff 1px solid;
border-radius: 5px;
z-index: 100;
}
.page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
.page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f106';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}