@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese');
/* <FOR_PC> */
.pc {
display: inherit;
}
.smt {
display: none;
}
#offcanvas-layer, #offcanvas-menu, #offcanvas-button {
display: none;
}
#article img{
height:auto;
}
/* </ FOR_PC> */
/* <RESET> */
html {
overflow-y: scroll;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
}
body {
text-align: center;
}
body, input, select, textarea, button, pre {
color: #232323;
font-family: 'Noto Sans JP', 'Roboto', sans-serif;
line-height: 1.8;
font-size: 1.6rem;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, span, a, b, i {
margin: 0;
padding: 0;
word-break: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
box-sizing: border-box;
}
input, textarea {
margin: 0;
}
input[type="text"], input[type="tel"], input[type="email"] {
max-width: 400px;
}
textarea {
width: 60%;
}
table {
font-size: 100%;
border-spacing: 0;
border-collapse: collapse;
}
fieldset, img, iframe {
border: 0;
vertical-align: top;
max-width: 100%;
}
a:hover img {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
line-height: 1.25;
}
abbr, acronym {
border: 0;
}
a {
color: #232323;
text-decoration: none;
}
#article a, .outline a {
color: #0021ba;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
/* </ RESET> */
/* <MODULE> */
/* common class */
.flexbox{
display:flex;
justify-content: space-between;
flex-wrap:wrap;
}
.center {
text-align: center !important;
}
.right {
text-align: right !important;
}
.b {
font-weight: bold;
}
.red {
color: #d62323 !important;
}
.large {
font-size: 2.2rem !important;
}
.xlarge {
font-size: 3.2rem !important;
}
.small {
font-size: 1.2rem !important;
line-height: 1.4 !important;
}
.clear {
clear: both;
}
.kome {
text-indent: -1em;
padding-left: 1em;
}
.cf:after {
content: "";
clear: both;
display: block;
}
.mt-0 {
margin-top: 0px !important;
}
.mt-10 {
margin-top: 10px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mb-0 {
margin-bottom: 0px !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-15 {
margin-bottom: 15px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.ml-20 {
margin-left: 20px !important;
}
/* font */
.ttl-h1 {
font-size: 3.6rem;
color: #fff;
letter-spacing: 0.2em;
background-image:
url("../images/common/ttl-h1-mesh.png"), url("../images/common/ttl-h1-bgi.jpg");
background-repeat:
repeat, no-repeat;
background-position:
center center, bottom center;
background-size:
auto auto, cover;
padding: 80px 0;
margin: 0 0 40px;
text-align: center;
position: relative;
}
.ttl-h1-img {
padding: 1px 0;
text-align: center;
background-image: url("../images/common/footer-mesh.png");
background-repeat: repeat;
background-position: center center;
background-size: auto auto;
}
.ttl-h2 {
border: solid 1px #0120b8;
border-radius: 5px;
color: #0120b8;
font-weight: bold;
font-size: 2rem;
padding: 16px 50px;
margin: 0 0 30px;
text-align: left;
position: relative;
}
.ttl-h2:before {
width: 20px;
height: 10px;
display: inline-block;
content: "";
background: #fbd43b;
position: absolute;
left: 20px;
top: calc(50% - 5px);
}
.ttl-h3, .blog-content h3 {
color: #0120b8;
font-weight: bold;
font-size: 1.8rem;
padding: 0 50px;
margin: 40px 0 20px -20px;
text-align: left;
position: relative;
}
.ttl-h3:before, .blog-content h3:before {
width: 20px;
height: 5px;
display: inline-block;
content: "";
background: #fbd43b;
position: absolute;
left: 20px;
top: calc(50% - 2px);
}
.ttl-h4 {
color: #0120b8;
font-weight: bold;
font-size: 1.6rem;
margin: 20px 0 1em;
}
.ttl-sub1 {
color: #0120b8;
font-size: 2rem;
font-weight: bold;
padding: 28px 0;
margin-bottom: 60px;
border-top: solid 1px #0120b8;
border-bottom: solid 1px #0120b8;
text-align: center;
}
.ttl-catch{
text-align: center;
margin-bottom: 50px;
}
.ttl-catch p{
margin-top: 1em;
}
.ttl-catch small{
font-size: 2.4rem;
display: block;
font-weight: bold;
}
.ttl-catch b{
font-size: 3.6rem;
line-height: 1.3;
display: inline-block;
font-weight: bold;
position: relative;
background: linear-gradient(transparent 80%, #ffff05 60%);
}
.ttl-catch span{
font-size: 3.6rem;
line-height: 1.3;
font-weight: bold;
}
.title1 {
text-align: center;
color: #0021ba;
font-weight: bold;
font-size: 2.8rem;
}
.title1:before, .title1:after {
content: "";
display: inline-block;
width: 28px;
height: 3px;
background: #0021ba;
margin: 0 20px;
vertical-align: middle;
}
.ttl1{
font-size: 2.2rem;
font-weight: bold;
padding-bottom: 14px;
border-bottom: solid 3px #0021ba;
margin-bottom: 18px;
}
.ttl2{
font-size: 1.8rem;
font-weight: bold;
color: #0021ba;
border-bottom: solid 3px #0021ba;
padding: 10px 0 4px;
margin-bottom: 10px;
}
.ffw {
text-shadow:
#fff 2px 0px 0px, #fff -2px 0px 0px, #fff 0px -2px 0px, #fff 0px 2px 0px, #fff 2px 2px 0px, #fff -2px 2px 0px, #fff 2px -2px 0px, #fff -2px -2px 0px, #fff 1px 2px 0px, #fff -1px 2px 0px, #fff 1px -2px 0px, #fff -1px -2px 0px, #fff 2px 1px 0px, #fff -2px 1px 0px, #fff 2px -1px 0px, #fff -2px -1px 0px, #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
}
/* button */
.btn-l, .btn-s, .btn-ss, .btn-rec {
background: #0021ba !important;
color: #fff !important;
text-decoration: none !important;
border-radius: 10px;
text-align: center;
display: inline-block;
padding: 10px 40px;
margin: 0 auto;
min-width: 620px;
font-size: 2rem;
font-weight: bold;
border: none;
}
.btn-s {
font-size: 1.8rem;
min-width: initial;
min-width: auto;
padding: 10px 55px;
}
.btn-ss {
font-size: 1.4rem;
min-width: initial;
min-width: auto;
padding: 6px 20px;
}
.btn-s + .btn-s {
margin-left: 20px;
}
.btn-ss + .btn-ss {
margin-left: 3px;
margin-right: 3px;
}
.btn-rec {
border-radius: 0;
font-size: 1.8rem;
padding-top: 20px;
padding-bottom: 20px;
min-width: 1px;
display: block;
}
.btn-rec:after {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
margin-left: 6px;
}
.btn-l i, .btn-s i, .btn-ss i {
color: #ffff05;
margin-right: 4px;
}
.btn-l i {
margin: 0 10px;
}
.btn-l:hover, .btn-s:hover, .btn-ss:hover, .btn-xl:hover, .btn-rec:hover {
background: #ffff00 !important;
color: #0021ba !important;
}
.btn-l:hover i, .btn-s:hover i, .btn-ss:hover i {
color: #0021ba !important;
}
.btn-xl {
display: block;
font-size: 2.4rem;
color: #232323;
background: #fff;
padding: 20px 0;
border-radius: 10px;
text-align: center;
border: solid 2px #232323;
box-shadow: -4px 4px 0px 0px #232323;
position: relative;
text-decoration: none;
}
.btn-xl-half {
display: inline-block;
width: 480px;
}
.btn-xl:after {
display: inline-block;
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
vertical-align: middle;
font-size: 2.4rem;
line-height: 1.25;
right: 12px;
bottom: 0px;
position: absolute;
}
/* list */
p + .list, .list + p {
margin-top: 1em;
}
ul.list > li {
position: relative;
padding-left: 16px;
}
ul.list > li:not(:last-child) {
margin-bottom: 1em;
}
ul.list-s > li {
position: relative;
padding-left: 16px;
}
ul.list-s > li:before {
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
color: #0120b8;
font-size: 1.6rem;
position: absolute;
left: 0;
top: 0;
}
td ul.list > li:not(:last-child) {
margin-bottom: 0.5em;
}
ul.list > li:before {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
color: #0120b8;
font-size: 2.2rem;
position: absolute;
left: 0px;
top: calc(50% - 20px);
}
ul.ymobile-list > li:before {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
color: #0120b8;
font-size: 2.2rem;
position: relative;
left: -7px;
top: 2px;
}
td ul.list > li:before {
top: calc(50% - 16px);
}
ol.list {
margin-left: 16px;
}
ol.list > li {
list-style: decimal outside;
}
.list-il li {
display: inline-block;
margin-right: 20px;
}
ul.list-p li {
padding: 0 0 0 30px;
position: relative;
font-weight: bold;
font-size: 1.6rem;
}
ul.list-p li:not(:last-child) {
margin: 0 0 10px;
}
ul.list-p li:before {
content: "";
background: #fbd43b;
width: 12px;
height: 6px;
position: absolute;
top: calc(50% - 3px);
left: 10px;
}
ol.list-p {
padding: 0 0 0 30px;
list-style: decimal outside;
}
/* box */
.b-red{
border: solid 1px #f14018;
color:#f14018;
font-weight: bold;
padding: 3px;
text-align: center;
margin: 60px 0;
}
.center-b, .center-b.b0 {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
.b0 {
margin: 0 20px 50px;
}
.b0 p:not(:last-child) {
margin-bottom: 1em;
}
.b0 .info {
margin-bottom: 30px;
}
.b0 .b-note p {
margin-bottom: 0;
}
.b0 .photolist {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.b0 .photolist dl {
width: 48%;
margin-bottom: 40px;
}
.b0 .photolist dl dt {
text-align: center;
background: #f3f3f3;
}
.b0 .photolist dl dd {
margin: 10px 0;
}
.b1{
background:url("../images/collabo_wifi/b1-bg.jpg") no-repeat left bottom;
min-height: 480px;
margin-bottom: 80px;
}
.b1 ul.needs{
max-width: 780px;
margin: 0 auto;
padding: 0 0 74px;
display: flex;
justify-content: space-between;
position: relative;
}
.b1 ul.needs:after{
content:"";
display: block;
position: absolute;
width: 780px;
height: 75px;
background: url(../images/collabo_wifi/needs-btm.png) no-repeat left bottom;
left: 0;
bottom: 0;
z-index: 2;
}
.b1 ul.needs li{
width: 18%;
border: solid 1px #ccc;
background: #fff;
padding: 16px 0 20px;
font-size: 1.8rem;
line-height: 1.33;
font-weight: bold;
text-align: center;
position: relative;
}
.b1 ul.needs li:before{
content:"";
display: block;
margin: 0 auto 12px;
background:url("../images/collabo_wifi/icon1.png") no-repeat left top;
width: 40px;
height: 40px;
}
.b1 ul.solve{
width: 500px;
background: #0120b8;
float: right;
margin-right: -30px;
padding: 30px 50px;
}
.b1 ul.solve li{
background:url("../images/collabo_wifi/icon2.png") no-repeat left top;
padding: 0 0 0 38px;
color: #fff;
font-weight: bold;
font-size: 2rem;
line-height: 1.4;
}
.b1 ul.solve li.ttl{
color: #ffff05;
font-size: 2.4rem;
padding-left: 0;
background: none;
}
.b1 ul.solve li:first-of-type{
margin-bottom: 20px;
}
.b1 ul.solve li b{
color: #ffff05;
}
.b2{
margin-bottom: 50px;
}
.b2 ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.b2 ul li{
width: 32%;
margin-bottom: 20px;
background: #f3f3f3;
border-radius: 10px;
padding: 32px 15px 32px 35px;
}
.b2 ul li h3{
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 15px;
position: relative;
padding-left: 30px;
}
.b2 ul li h3:before{
color: #0120b8;
font-family: "Font Awesome 5 Free";
content: '\f14a';
font-weight: 900;
position: absolute;
top: 0;
left: 0;
}
.b2 .note{
border: solid 1px #ccc;
margin: 0 60px;
padding: 28px 32px;
}
.b2 .note h3{
font-weight: bold;
margin-bottom: 10px;
font-size: 1.6rem;
}
.b3{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 20px 50px;
}
.b3-allhol .topic{
width: 48%;
}
.b3 dl{
width: 48%;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.b3-full dl{
width: 100%;
margin-bottom: 0;
}
.b3 dl:not(:nth-last-child(1)),
.b3 dl:not(:nth-last-child(2)){
margin-bottom: 0;
}
.b3 dl dt{
margin-right: 30px;
}
.b3 dl dd{
flex:1;
}
.b3-full dl dd .btn-r{
float: right;
width: 320px;
margin: 25px 0 0 40px;
}
.b3 h3{
font-size: 1.8rem;
color: #0120b8;
position: relative;
margin-bottom: 25px;
}
.b3 h3:after{
content:"";
background: #fbd43b;
width: 20px;
height: 5px;
display: inline-block;
position: absolute;
bottom: -12px;
left: 0;
}
.b4 dl{
display: flex;
justify-content: space-between;
padding: 0 40px 50px 20px;
flex-direction:row-reverse;
}
.b4 dl dt{
margin-left: 50px;
}
.b5{
max-width: 780px;
margin: 0 auto 80px;
text-align: right;
}
.b5 img{
margin-bottom: 15px;
}
.b6 ol{
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.b6 ol li{
width: 32%;
position: relative;
}
.b6 ol li:after{
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: 0.5em;
content: '\f0da';
color: #0120b8;
position: absolute;
right: -13px;
top: calc(50% - 8px);
font-size: 2.2rem;
}
.b6 ol li:last-of-type:after{ content:none; }
.b6 ol li h3{
color: #fff;
background: #0120b8;
font-weight: bold;
font-size: 1.6rem;
padding: 32px 0 28px 26px;
border-radius: 10px 10px 0 0;
}
.b6 ol li h3 i{
margin-right: 5px;
}
.b6 ol li:nth-of-type(1) h3 i{ color: #019fe8; }
.b6 ol li:nth-of-type(2) h3 i{ color: #019fe8; }
.b6 ol li:nth-of-type(3) h3 i{ color: #ffff05; }
.b6 ol li p{
padding: 24px 32px;
background: #f3f3f3;
border-radius: 0 0 10px 10px;
}
.b7{
margin-bottom: 50px;
}
.b7>p{
text-align: right;
}
.b7 .price-box{
display: flex;
justify-content: space-between;
padding: 0 0 40px 16px;
}
.b7 .price-box h3{
font-size: 1.8rem;
font-weight: bold;
position: relative;
padding: 24px 0 0;
width: 20%;
}
.b7 .price-box h3:before{
content:"";
background: #fbd43b;
width: 20px;
height: 5px;
position: absolute;
top: 0;
left: 0;
}
.b7 .price-box .info{
width: 75%;
}
.b7 .price-box dl{
display: flex;
justify-content: space-between;
width: calc(50% - 61px);
align-items: center;
background: #f3f3f3;
}
.b7 .price-box dl.dlist1{
width: calc(94% - 67px);
}
.b7 .price-box dl.single{
width: 100%;
}
.b7 .price-box dl dt{
background: #e5e5e5;
padding: 24px;
width: 55%;
}
.b7 .price-box h4{
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 6px;
}
.b7 .price-box dl dd{
padding: 24px 16px;
width: 45%;
color: #666;
font-size: 1.6rem;
font-weight: bold;
text-align: right;
line-height: 1.25;
}
.b7 .price-box dl.single dd{
padding: 0 16px;
}
.b7 .price-box dl dd .price{
color: #0120b8;
}
.b7 .price-box dl dd .price b{
font-size: 2.4rem;
}
.b7 .price-box:first-of-type dl dd .price b{
font-size: 3.6rem;
}
.b7 .price-box table.table-s{
width: 100%;
}
.b8,
.b9{
text-align: center;
margin-bottom: 80px;
}
.b10{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 20px 50px;
}
.b10 a{
width: 48%;
margin-bottom: 40px;
text-decoration: none !important;
background: #f3f3f3;
border-radius: 10px;
padding: 32px 15px 32px 35px;
}
.b10 a .ttl{
display: block;
font-size: 1.8rem;
color: #0120b8;
position: relative;
margin-bottom: 1rem;
font-weight: bold;
text-decoration: none;
}
.b10 a .ttl i{
margin-right: 8px;
}
.b10 span.btn-ss{
display: block;
margin-top: 10px;
}
.b10 a p{
color: #333;
text-decoration: none;
}
.note2 + .price-box{
margin-top: 40px;
}
.price-b2 dl{
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
background: #f3f3f3;
}
.price-b2 dl dt{
background: #e5e5e5;
padding: 24px;
width: 55%;
}
.price-b2 dl dt h4{
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 6px;
}
.price-b2 dl dd{
padding: 24px 16px;
width: 45%;
color: #666;
font-size: 1.6rem;
font-weight: bold;
text-align: right;
line-height: 1.25;
}
.price-b2 dl dd .price{
color: #0120b8;
}
.price-b2 dl dd .price b{
font-size: 3.6rem;
}
.price-b2 p.center{
margin-top: 36px;
}
.box-inq .nav>li .tel{
font-size: 4.8rem;
font-weight: bold;
}
.box-inq .nav>li .time{
font-size: 1.8rem;
}
.box-inq .nav>li .tel:before{
content: "";
display: inline-block;
background:url(../images/collabo/icon-freecall.png);
width: 56px;
height: 44px;
vertical-align: middle;
margin-right: 6px;
}
.tel-l{
font-size: 4.8rem;
font-weight: bold;
margin-top: -16px;
}
.tel-l:before{
content: "";
display: inline-block;
background:url(../images/collabo/icon-freecall.png);
width: 56px;
height: 44px;
vertical-align: middle;
margin-right: 6px;
}
.b-note {
border: solid 1px #ccc;
margin: 0 60px;
padding: 28px 32px;
margin-top: 45px;
}
.b-h3 {
margin: 0 20px 40px;
}
.b-intro dl {
display: flex;
justify-content: space-between;
padding: 0 40px 50px 20px;
}
.b-intro dl dt {
width: 280px;
margin-right: 40px;
}
.b-intro dl dd {
flex: 1;
}
.col2 {
display: flex;
justify-content: space-between;
}
.col2-s {
display: flex;
justify-content: flex-start;
}
.col2-s li {
margin-right: 40px;
}
.note1 {
background: #0120b8;
padding: 30px 50px;
margin: 0 20px;
}
.note1 p {
background: url("../images/collabo_wifi/icon2.png") no-repeat left top;
padding: 0 0 0 38px;
color: #fff;
font-weight: bold;
font-size: 2rem;
line-height: 1.4;
}
.note1-center {
text-align: center;
}
.note1-center p {
display: inline-block;
}
.note2{
border: solid 1px #ccc;
padding: 28px 32px;
}
.note2 h3{
font-weight: bold;
margin-bottom: 10px;
font-size: 1.6rem;
}
.note3{
font-size: 1.2rem;
padding: 16px 0;
}
.pagelist{
margin-bottom: 60px;
}
.pagelist ul{
display: flex;
justify-content:space-between;
border-bottom: solid 2px #fbd43b;
margin-bottom: 20px;
}
.pagelist ul li{
padding:0 0 15px;
position: relative;
}
.pagelist ul li:after{
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #fbd53b transparent transparent transparent;
bottom: -6px;
left: calc(50% - 6px);
}
.pagelist ul li a{
font-size: 1.4rem;
font-weight: bold;
color: #0120b8;
}
.news-b {
max-width: 940px;
margin: 0 auto 60px;
padding:60px 0 0;
}
#tokyo_ic-marche .news-b {
padding-top:0;
}
.news-b ul.tabn {
display: flex;
justify-content: space-between;
margin-top: 35px;
}
.news-b ul.tabn li {
width: 24%;
}
.news-b ul.tabn li a {
width: 100%;
padding: 10px 0;
font-weight: bold;
border-radius: 10px;
background: #f3f3f3;
display: inline-block;
}
.news-b .tabn li a:hover, .news-b .tab-box-cr-1 li.tabn-1 a, .news-b .tab-box-cr-2 li.tabn-2 a, .news-b .tab-box-cr-3 li.tabn-3 a, .news-b .tab-box-cr-4 li.tabn-4 a {
background-color: #0021ba;
color: #fff !important;
}
.news-b .tab_content li {
padding: 20px 0;
border-bottom: solid 1px #d6d9e1;
}
.news-b .tab_content li.new dd:after{
content:"NEW";
background: #ba0000;
color: #fff;
line-height: 20px;
padding: 0 1em;
margin-left: 12px;
}
.news-b .tab_content li .genre {
min-width: 80px;
padding:0 10px;
line-height: 20px;
font-size: 1.2rem;
border-radius: 4px;
background: #0021ba;
color: #fff;
float: left;
}
.news-b .tab_content li dl {
/*margin-left: 90px;*/
display: flex;
justify-content: flex-start;
line-height: 20px;
text-align: left;
padding-left: 10px;
}
.news-b .tab_content li dl dt {
color: #b9bbbe;
margin-right: 10px;
}
.tile-b {
padding: 48px;
background: #f3f3f3;
margin: -50px 0 0;
}
.tile-b ul {
max-width: 780px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tile-b ul li {
width: 30%;
display: inline;
}
.tile-b ul li a {
display: block;
width: 100%;
height: 150px;
margin: 16px 0;
padding: 32px 0 0;
border-radius: 10px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
background: #fff;
position: relative;
font-weight: bold;
font-size: 1.8rem;
line-height: 1.2;
color: #e57c00;
}
.tile-b ul li a small {
display: block;
font-size: 1.2rem;
}
.tile-b ul li a:before {
content: "";
display: block;
width: 76px;
height: 54px;
margin: 0 auto 10px;
background-size: 76px 76px;
background-position: 0 -8px;
}
.bg-sky{
background: #009fe8;
color: #fff;
padding: 50px;
text-align: center;
margin-top: 80px;
}
.bg-sky h3.title1{ color: #fff; }
.bg-sky .title1:before, .bg-sky .title1:after{ background: #fff; }
.bg-sky .btn-xl{
display: inline-block;
padding-left: 40px;
padding-right: 40px;
}
.bg-sky p+p .btn-xl{
margin-top: 20px;
}
/* table */
.table-s, .table-recruit, .table-tokyo_ic, .table-l, .table01 {
border: solid 1px #ccc;
border-collapse: collapse;
border-spacing: 0;
line-height: 1.5;
width: 100%;
}
.table-recruit, .table-tokyo_ic {
border: none;
}
.table-s th, .table-recruit th, .table-tokyo_ic th, .table-l th, .table01 th {
border: solid 1px #ccc;
background: #f3f3f3;
font-weight: bold;
text-align: center;
padding: 8px 12px;
}
.table-recruit th, .table-tokyo_ic th {
width: 22%;
background: #0120b8;
color: #fff;
border: none;
border-bottom: solid 2px #fff;
}
.table-tokyo_ic th {
background: #a1ccd4;
text-align: left;
}
.table-s td, .table-recruit td, .table-tokyo_ic td, .table-l td, .table01 td {
border: solid 1px #ccc;
background: #fff;
text-align: left;
padding: 8px 12px;
}
.table-recruit td, .table-tokyo_ic td {
width: 78%;
border: none;
background: #f3f3f3;
border-bottom: solid 2px #fff;
}
.table-l th, .table-l td {
padding: 14px 20px;
}
.table-f {
margin-bottom: 40px;
}
.table-f th, .table-f td {
padding: 18px 20px;
}
.table-f th {
width: 28%;
background: #f3f3f3;
font-weight: bold;
}
.table-f td .ttl-h4 {
margin: 0 0 0.5em;
}
.table-f .must {
font-size: 1.2rem;
padding: 2px 5px;
background: #ff9393;
color: #fff;
border-radius: 2px;
margin-right: 5px;
position: relative;
}
.table-f .wpcf7-checkbox, .table-f .wpcf7-radio {
display: inline-block;
margin-left: -1em;
}
span.wpcf7-not-valid-tip:before {
font-family: "Font Awesome 5 Free";
content: '\f06a';
font-weight: 900;
margin-right: 5px;
}
.table-f th {
border: solid 1px #d7d7d7;
}
.table-f td {
border: solid 1px #d7d7d7;
}
.entry-content .table-f tr, .entry-content table {
border: solid 1px #d7d7d7;
}
.verticallist .wpcf7-list-item {
display: block;
}
/*reCAPTCHA badge*/
.grecaptcha-badge {
margin: 40px auto 0;
}
/* </ MODULE> */
/* <HEADER> */
#header .body {
max-width: 940px;
margin: 0 auto;
}
#header .body .logo {
padding: 20px 0 10px;
float:left;
}
#header .body .logo img,
#header .body .tel img{
height: 24px;
}
#header .body .tel {
padding: 20px 0 0;
float: right;
}
#search-box{
float: right;
width: 300px;
padding-top: 18px;
}
#offcanvas-menu #search-box{
width: 100%;
}
.search-box-inner{
display: flex;
position: relative;
justify-content: center;
}
.search-box-inner input[type="text"]{
border-radius: 4px 0 0 4px;
text-align: left;
border:solid 1px #ccc;
width: 200px;
font-size: 1.2rem;
}
#offcanvas-menu .search-box-inner input[type="text"]{
width: calc(100% - 100px);
}
.search-box-inner button{
border-radius: 0 4px 4px 0;
border: none;
background-color:#666;
color:#fff;
display: inline-block;
padding: 0 10px;
white-space: normal;
text-align: center;
font-size: 1.2rem;
}
/* </ HEADER> */
/* <FOOTER> */
#footer {
margin-top: 50px;
background-image:
url("../images/common/footer-mesh.png"), url("../images/common/footer-bgi.jpg");
background-repeat:
repeat, no-repeat;
background-position:
center center, bottom center;
background-size:
auto auto, cover;
}
#footer .body {
max-width: 940px;
margin: 0 auto;
text-align: left;
padding: 40px 0 56px;
color: #fff;
position: relative;
}
#footer .body a {
color: #fff;
}
#footer .body .inq {
width: 322px;
float: left;
margin-right: 58px;
}
#footer .body .inq p img {
margin: 14px 0;
}
#footer .body .inq ul {
display: flex;
justify-content: space-between;
}
#footer .body .inq ul li {
width: 48%;
}
#footer .body .inq ul li a {
display: block;
padding: 6px 10px;
border: solid 1px #fff;
border-radius: 4px;
position: relative;
font-size: 1.4rem;
}
#footer .body .inq ul li a:before {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
position: absolute;
right: 10px;
top: calc(50% - 10px);
}
#footer .body .nav {
width: 172px;
margin-right: 20px;
float: left;
}
#footer .body .nav:last-of-type {
margin-right: 0;
}
#footer .body .nav h3 {
font-size: 1.2rem;
border-bottom: solid 1px #fff;
padding-bottom: 10px;
margin-bottom: 10px;
}
#footer .body .nav h3:not(:first-of-type) {
margin-top: 20px;
}
#footer .body .nav ul li {
font-size: 1.1rem;
margin: 6px 0;
}
#footer .body .nav ul li:before {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
margin-right: 5px;
}
#footer .body .pagetop {
position: absolute;
bottom: 20px;
right: 0;
}
#footer .body .pagetop a {
display: block;
padding: 6px 10px 6px 26px;
border-radius: 4px;
background: #ffff00;
color: #0021ba;
font-weight: bold;
position: relative;
font-size: 1.2rem;
}
#footer .body .pagetop a:before {
font-family: "Font Awesome 5 Free";
content: '\f0d8';
font-weight: 900;
position: absolute;
left: 10px;
top: calc(50% - 8px);
}
.copy{
background:#0021ba;
color:#fff;
padding: 16px 0;
font-size: 1.2rem;
line-height: 1.2;
}
/* </ FOOTER> */
/* <GNAV> */
.mnav {
background: #0021ba;
}
.mnav>ul{
max-width: 940px;
margin: 0 auto;
position: relative;
display: flex;
justify-content: flex-start;
}
.mnav>ul>li{
display: inline;
flex-grow: 1;
}
.mnav>ul>li>a {
text-align: center;
color: #fff;
font-weight: bold;
padding: 12px 0;
box-sizing: border-box;
display: block;
position: relative;
letter-spacing: .07em;
}
.mnav>ul>li.hov>a {
background: #f3f3f3;
color: #000;
z-index: 4;
}
.mnav>ul>li>a:after,
.mnav>ul>li:first-of-type>a:before{
height: 30px;
background: #1c3cd1;
top: 10px;
content: "";
display: block;
margin: 0 auto;
width: 1px;
right: 0;
position: absolute;
z-index: 2;
}
.mnav>ul>li:first-of-type>a:before{
left:0;
right: auto;
}
.menu_contents {
background: #f3f3f3;
display: none;
position: absolute;
top: 100%;
left: calc(470px - 50vw);
width: 100vw;
padding: 30px 0;
z-index: 99;
box-shadow: 0 2px 2px #cdcdcd;
}
.menu_contents .inner{
max-width: 940px;
margin: 0 auto;
font-size: 1.2rem;
text-align: left;
}
.menu_contents .nav1{
background: #fff;
display: flex;
justify-content:flex-start;
flex-wrap:wrap;
padding: 20px 0;
}
.menu_contents .ttl{
font-size: 1.4rem;
font-weight: bold;
color:#0021ba;
border-bottom: solid 1px #0021ba;
padding: 0 0 4px;
margin-top: 20px;
}
.menu_contents .ttl a{
display: inline-block;
position: relative;
}
.menu_contents .ttl a:after{
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
position: absolute;
right: -20px;
top: calc(50% - 0.8em);
color: #0021ba;
}
.menu_contents .topics{
border-right: solid 1px #ccc;
}
.menu_contents .topics:last-of-type{
border-right: none;
}
.menu_contents .topics{
width: 25%;
}
.menu_contents .nav1 .topics{
width: 23%;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3){
width: 31%;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3) ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3) ul li{
width:50%;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3) ul li:nth-of-type(n+7){
width:100%;
}
.menu_contents .topics-full{
border-right: none;
width: 100% !important;
}
.menu_contents .topics h3{
font-size: 1.4rem;
padding-left: 20px;
text-align: left;
}
.menu_contents .topics h3 a{
display: block;
position: relative;
}
.menu_contents .topics h3 a:after{
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
position: absolute;
right: 20px;
top: calc(50% - 0.5em);
color: #0021ba;
}
.menu_contents .topics h3 i{
width: 24px;
height: 24px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
margin-top: -3px;
}
.menu_contents .topics h3 i.tv{ background-image: url("../images/common/header-tv.png"); }
.menu_contents .topics h3 i.net{ background-image: url("../images/common/header-net.png"); }
.menu_contents .topics h3 i.tel{ background-image: url("../images/common/header-tel.png"); }
.menu_contents .topics h3 i.ryokin{ background-image: url("../images/common/header-ryokin.png"); }
.menu_contents .topics h3+h3,
.menu_contents .topics h3+ul{
margin-top: 12px;
}
.menu_contents .topics li{
margin-bottom: 8px;
padding-left: 20px;
}
.menu_contents .topics li:last-of-type{
margin-bottom: 0;
}
.menu_contents .topics li a{
display: block;
position: relative;
}
.menu_contents .topics li .new{
background: #ba0000;
color: #fff;
padding: 1px 4px;
margin-right: 3px;
}
.menu_contents .topics li a .new{
color: #fff;
text-decoration:none;
}
.catenav{
position: relative;
margin: 20px 0;
overflow: hidden
}
.catenav:before {
width: 100%;
height: 100%;
margin: 0 -10000%;
padding: 0 10000%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background:
#eee;
content: '';
}
.catenav h3{
display: none;
}
.catenav ul{
background: #eee;
padding-top: 4px;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 940px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.catenav ul li{
width: 100%;
}
.catenav ul li a.is-current,
.catenav ul li a:hover{
background:
#fff;
}
.catenav ul li a {
width: 100%;
height: 100%;
padding: 6px 0;
min-height:52px;
font-size: 1.2rem;
line-height: 1.33;
color:
#666;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.gnav1 {
background: #0021ba;
}
.gnav2 {
background: #f3f3f3;
}
#footer .gnav2 {
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
}
.gnav3 {
background: #232323;
}
.gnav1 ul, .gnav2 ul, .gnav3 ul {
max-width: 940px;
margin: 0 auto;
position: relative;
display: flex;
justify-content: flex-start;
}
.gnav1 ul li, .gnav2 ul li, .gnav3 ul li {
display: inline;
flex-grow: 1;
}
.gnav1 ul li a {
text-align: center;
color: #fff;
font-weight: bold;
padding: 11px 0 0;
height: 80px;
box-sizing: border-box;
display: block;
position: relative;
letter-spacing: .07em;
}
.gnav2 ul li a {
text-align: center;
line-height: 40px;
display: block;
position: relative;
letter-spacing: .07em;
}
.gnav3 ul li a {
color: #fff;
font-weight: bold;
text-align: center;
line-height: 50px;
display: block;
position: relative;
letter-spacing: .07em;
}
.gnav1 li a:before {
content: "";
display: block;
margin: 0 auto;
width: 32px;
height: 32px;
}
.gnav1 li:nth-of-type(1) a:before {
background-image: url(../images/header/gnav1-icon1.png);
}
.gnav1 li:nth-of-type(2) a:before {
background-image: url(../images/header/gnav1-icon2.png);
}
.gnav1 li:nth-of-type(3) a:before {
background-image: url(../images/header/gnav1-icon3.png);
}
.gnav1 li:nth-of-type(4) a:before {
background-image: url(../images/header/gnav1-icon4.png);
}
.gnav1 li:nth-of-type(5) a:before {
background-image: url(../images/header/gnav1-icon5.png);
}
.gnav1 li:nth-of-type(6) a:before {
background-image: url(../images/header/gnav1-icon6.png);
}
.gnav1 li:nth-of-type(7) a:before {
background-image: url(../images/header/gnav1-icon7.png);
}
.gnav1 li a:after, .gnav1 ul:before {
height: 60px;
background: #1c3cd1;
top: 10px;
}
.gnav2 ul li a:after, .gnav2 ul:before {
height: 30px;
background: #dddddd;
top: 5px;
}
.gnav1 li a:after, .gnav1 ul:before, .gnav2 ul li a:after, .gnav2 ul:before {
content: "";
display: block;
margin: 0 auto;
width: 1px;
right: 0px;
position: absolute;
z-index: 2;
}
.gnav1 ul:before, .gnav2 ul:before {
right: auto;
left: 0;
}
/* </ GNAV> */
/* <OTHER LIBRARY> */
#breadcramb{
font-size: 1.3rem;
max-width: 940px;
margin: 0 auto;
padding: 20px 0;
display: flex;
justify-content: flex-start;
}
#breadcramb li:after{
content:">";
padding-left: 6px;
margin-right: 6px;
}
#breadcramb li:last-of-type:after{
content:none;
}
#article{
max-width: 940px;
margin: 0 auto;
text-align: left;
}
#article a:hover{
text-decoration: none;
}
/* pager */
.wp-pagenavi, .gsc-cursor-box {
clear: both;
margin: 30px 0;
text-align: center !important;
}
.wp-pagenavi a, .wp-pagenavi span, .gsc-cursor-page {
text-decoration: none;
border: 1px solid #32C8D4 !important;
padding: 6px 10px;
margin: 2px;
color: #333 !important;
white-space: nowrap;
line-height: 16px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current, .wp-pagenavi a.last, .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink, .gsc-cursor-page:hover {
background: #32C8D4 !important;
color: #fff !important;
}
.wp-pagenavi span.current {
font-weight: bold;
}
.gsc-cursor-current-page {
font-weight: bold !important;
background: #32C8D4 !important;
color: #fff !important;
}
/*contact form 7*/
.form-b{
margin-bottom: 40px;
}
.form-b dl{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: dotted 2px #d7d7d7;
}
.form-b dl dt{
width: 28%;
padding: 0 10px;
border-left: solid 5px #0021ba;
position: relative;
}
.form-b dl dt .must {
font-size: 1.2rem;
background: #0021ba;
color: #fff;
border-radius: 2px;
display: inline-block;
vertical-align: top;
margin: 4px 10px 0 0;
padding: 0 5px;
position: absolute;
top: calc(50% - 14px);
left: 10px;
}
.form-b dl dt .must+span{
padding-left: 50px;
display: inline-block;
}
.form-b dl dd{
flex:1;
margin: 18px 0;
}
.wpcf7-checkbox,
.wpcf7-radio {
display: inline-block;
margin-left: -1em;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.form-b dl dd p{
/*font-size: 1.2rem;*/
line-height: 1.5;
margin: 10px 0;
}
.form-b dl dd input[type="text"],
.form-b dl dd input[type="tel"],
.form-b dl dd input[type="email"],
.form-b dl dd textarea {
max-width: 400px;
}
.form-b dl dd input[type="text"].textsp-half{
max-width: 100px;
}
.form-b input[type="submit"]{
color: #000;
background: -webkit-linear-gradient(#f7e755 0%, #f4c229 100%);
background: -o-linear-gradient(#f7e755 0%, #f4c229 100%);
background: linear-gradient(#f7e755 0%, #f4c229 100%);
font-weight: bold;
min-width: 620px;
margin-top: 40px;
padding: 10px 40px;
border-radius: 10px;
border: none;
cursor:pointer;
font-size: 2.4rem;
}
.form-b input[type="submit"]:hover{
background: #0021ba;
color: #fff;
}
/*.form-b dl {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
border-bottom: dotted 1px #999;
}
.form-b dl dt {
width: 200px;
font-weight: bold;
font-size: 1.6rem;
}
.form-b dl dd {
flex: 1;
border-left: solid 3px #eee;
padding-left: 20px;
}
.form-b dl dd input[type="text"], .form-b dl dd input[type="tel"], .form-b dl dd input[type="email"], .form-b dl dd textarea {
max-width: 400px;
}*/
/* </ OTHER LIBRARY> */
@media screen and (max-width: 960px) {
/* <FOR_SMT> */
.pc {
display: none;
}
.smt {
display: inherit;
}
/* </ FOR_SMT> */
/* <RESET> */
body, input, select, textarea, button, pre {
font-size: 1.4rem;
}
body {
position: relative;
overflow-x: hidden;
}
/* </RESET> */
/*オフキャンバス設定*/
#offcanvas-menu {
display: block;
position: fixed;
top: 0;
padding-top: 52px;
right: -100%;
width: 100%;
height: 100%;
background: #fff;
z-index: 100000;
overflow-y: auto;
}
#offcanvas-container {
display: block;
position: relative;
top: 0;
right: 0;
width: 100%;
}
#offcanvas-button {
display: block;
background: #0120b8;
width: 52px;
height: 52px;
position: absolute;
top: 0;
right: 0;
z-index: 999999999999;
}
#offcanvas-button:after {
content: "MENU";
color: #fff;
bottom: 6px;
position: absolute;
text-align: center;
left: 0;
font-size: 9px;
font-family: 'Cormorant Garamond';
width: 100%;
}
#offcanvas-button span, #offcanvas-button span:before, #offcanvas-button span:after {
position: absolute;
top: 50%;
left: 50%;
height: 2px;
width: 26px;
cursor: pointer;
background: #fff;
display: block;
content: '';
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#offcanvas-button span {
transform: translate3d(-50%, -4px, 0);
-webkit-transform: translate3d(-50%, -4px, 0);
}
#offcanvas-button span:before {
transform: translate3d(-50%, -10px, 0);
-webkit-transform: translate3d(-50%, -10px, 0);
}
#offcanvas-button span:after {
transform: translate3d(-50%, 7px, 0);
-webkit-transform: translate3d(-50%, 7px, 0);
}
#offcanvas-button.close:after {
content: "";
}
#offcanvas-button.close span {
background-color: transparent;
}
#offcanvas-button.close span:before {
-ms-transform: translateX(-50%)rotate(45deg);
transform: translateX(-50%)rotate(45deg);
-webkit-transform: translateX(-50%)rotate(45deg);
top: 4px;
width: 36px;
}
#offcanvas-button.close span:after {
-ms-transform: translateX(-50%)translateY(-10px)rotate(-45deg);
transform: translateX(-50%)translateY(-10px)rotate(-45deg);
-webkit-transform: translateX(-50%)translateY(-10px)rotate(-45deg);
top: 14px;
width: 36px;
}
/*font*/
.ttl-h1 {
font-size: 3rem;
color: #fff;
letter-spacing: 0.2em;
padding: 60px 20px;
margin: 0 0 40px;
}
.ttl-h1-img {
padding: 1px 0;
text-align: center;
background-image: url("../images/common/footer-mesh.png");
background-repeat: repeat;
background-position: center center;
background-size: auto auto;
}
.ttl-h2 {
font-size: 1.8rem;
padding: 16px 16px 16px 38px;
margin: 0 0 20px;
}
.ttl-h2:before {
left: 10px;
}
.ttl-h3, .blog-content h3 {
font-size: 1.6rem;
margin: 30px -20px 20px;
}
.ttl-h3:before, .blog-content h3:before {
width: 20px;
height: 5px;
display: inline-block;
content: "";
background: #fbd43b;
position: absolute;
left: 20px;
top: calc(50% - 2px);
}
.ttl-h4 {
color: #0120b8;
font-weight: bold;
font-size: 1.6rem;
margin: 20px 0 1em;
}
.ttl-sub1 {
font-size: 1.8rem;
padding: 20px 0;
margin-bottom: 30px;
}
.ttl-catch{
margin: 0 20px 30px;
}
.ttl-catch small{
font-size: 1.8rem;
}
.ttl-catch small br{
display:none;
}
.ttl-catch b{
font-size: 2.8rem;
line-height: 1.3;
padding: 8px 16px;
background: #ffff05;
border-right: 6px;
margin: 12px 0;
}
.ttl-catch span{
font-size: 3.6rem;
line-height: 1.3;
font-weight: bold;
}
.title1 {
font-size: 2.1rem;
}
.title1:before, .title1:after {
width: 16px;
height: 3px;
margin: 0 10px;
}
.ffw {
text-shadow:
#fff 2px 0px 0px, #fff -2px 0px 0px, #fff 0px -2px 0px, #fff 0px 2px 0px, #fff 2px 2px 0px, #fff -2px 2px 0px, #fff 2px -2px 0px, #fff -2px -2px 0px, #fff 1px 2px 0px, #fff -1px 2px 0px, #fff 1px -2px 0px, #fff -1px -2px 0px, #fff 2px 1px 0px, #fff -2px 1px 0px, #fff 2px -1px 0px, #fff -2px -1px 0px, #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
}
/* button */
.btn-l, .btn-s, .btn-ss, .btn-rec {
min-width: 1px;
font-size: 1.8rem;
}
.btn-s {
font-size: 1.6rem;
min-width: initial;
min-width: auto;
padding: 10px 30px;
}
.btn-ss {
font-size: 1.2rem;
min-width: initial;
min-width: auto;
padding: 6px 20px;
}
.btn-s + .btn-s {
margin-top: 20px;
}
.btn-ss + .btn-ss {
margin-left: 3px;
margin-right: 3px;
}
.btn-rec {
border-radius: 0;
font-size: 1.8rem;
padding-top: 20px;
padding-bottom: 20px;
min-width: 1px;
display: block;
}
.btn-rec:after {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
margin-left: 6px;
}
.btn-l i, .btn-s i, .btn-ss i {
color: #ffff05;
margin-right: 4px;
}
.btn-l i {
margin: 0 10px;
}
.btn-l:hover, .btn-s:hover, .btn-ss:hover, .btn-xl:hover, .btn-rec:hover {
background: #ffff00 !important;
color: #0021ba !important;
}
.btn-l:hover i, .btn-s:hover i, .btn-ss:hover i {
color: #0021ba !important;
}
.btn-xl {
display: block;
font-size: 2rem;
color: #232323;
background: #fff;
padding: 20px 0;
border-radius: 10px;
text-align: center;
border: solid 2px #232323;
box-shadow: -4px 4px 0px 0px #232323;
position: relative;
text-decoration: none;
}
.btn-xl-half {
display: inline-block;
width: 480px;
}
.btn-xl:after {
display: inline-block;
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
vertical-align: middle;
font-size: 2.4rem;
line-height: 1.25;
right: 12px;
bottom: 0px;
position: absolute;
}
/* list */
p + .list, .list + p {
margin-top: 1em;
}
ul.list > li {
position: relative;
padding-left: 16px;
}
ul.list > li:not(:last-child) {
margin-bottom: 1em;
}
ul.list-s > li {
position: relative;
padding-left: 16px;
}
ul.list-s > li:before {
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
color: #0120b8;
font-size: 1.6rem;
position: absolute;
left: 0;
top: 0;
}
td ul.list > li:not(:last-child) {
margin-bottom: 0.5em;
}
ul.list > li:before {
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
color: #0120b8;
font-size: 2.2rem;
position: absolute;
left: 0;
top: calc(50% - 20px);
}
td ul.list > li:before {
top: calc(50% - 16px);
}
ol.list {
margin-left: 16px;
}
ol.list > li {
list-style: decimal outside;
}
.list-il li {
display: inline-block;
margin-right: 20px;
}
ul.list-p li {
padding: 0 0 0 30px;
position: relative;
font-weight: bold;
font-size: 1.6rem;
}
ul.list-p li:not(:last-child) {
margin: 0 0 10px;
}
ul.list-p li:before {
content: "";
background: #fbd43b;
width: 12px;
height: 6px;
position: absolute;
top: calc(50% - 3px);
left: 10px;
}
ol.list-p {
padding: 0 0 0 30px;
list-style: decimal outside;
}
/* box */
.center-b, .center-b.b0 {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
.b0 {
/*margin: 0 20px 30px;*/
margin: 0 0 30px;
}
.b0 p:not(:last-child) {
margin-bottom: 1em;
}
.b0 .info {
margin-bottom: 30px;
}
.b0 .b-note p {
margin-bottom: 0;
}
.b0 .photolist {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.b0 .photolist dl {
width: 100%;
margin-bottom: 40px;
}
.b0 .photolist dl dt {
text-align: center;
background: #f3f3f3;
}
.b0 .photolist dl dd {
margin: 10px 0;
}
.b1{
background-position: 0 0;
min-height: 1px;
margin-bottom: 80px;
}
.b1 ul.needs{
margin: 0 20px;
padding: 0 0 74px;
flex-wrap: wrap;
justify-content: center;
}
.b1 ul.needs:after{
content:none;
background: none;
}
.b1 ul.needs li{
width: calc(32% - 10px);
padding: 16px 10px 10px;
margin: 0 5px 10px;
font-size: 1.4rem;
line-height: 1.33;
background-color: rgba(255,255,255,0.7);
}
.b1 ul.needs li br{
display: none;
}
.b1 ul.needs li:before{
width: 30px;
height: 30px;
background-size: contain;
}
.b1 ul.solve{
width: auto;
float: none;
margin: 0;
padding: 30px 50px;
}
.b1 ul.solve li br{
display: none;
}
.b1 ul.solve li.ttl{
color: #ffff05;
font-size: 2.4rem;
padding-left: 0;
background: none;
}
.b1 ul.solve li:first-of-type{
margin-bottom: 20px;
}
.b1 ul.solve li b{
color: #ffff05;
}
.b2{
margin: 0 0 30px;
}
.b2 ul{
display: block;
}
.b2 ul li{
width: auto;
margin-bottom: 20px;
padding: 32px 15px 32px 35px;
}
.b2 ul li h3{
font-size: 1.6rem;
}
.b2 .note{
border: solid 1px #ccc;
margin: 0 60px;
padding: 28px 32px;
}
.b2 .note h3{
font-weight: bold;
margin-bottom: 10px;
font-size: 1.6rem;
}
.b3{
display: block;
margin: 0 0 30px;
}
.b3.b3-allhol{
display:flex;
}
.b3-allhol .topic{
margin-bottom:30px;
}
.b3 dl{
width: auto;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.b3-full dl{
width: 100%;
margin-bottom: 0;
}
.b3 dl:not(:nth-last-child(1)),
.b3 dl:not(:nth-last-child(2)){
margin-bottom: 40px;
}
.b3 dl dt{
margin-right: 20px;
}
.b3 dl dd{
flex:1;
}
.b3 dl dd .btn{
text-align: center;
}
.b3-full dl dd .btn-r{
float: right;
width: 320px;
margin: 25px 0 0 40px;
}
.b3 h3{
font-size: 1.8rem;
color: #0120b8;
position: relative;
margin-bottom: 25px;
}
.b3 h3:after{
content:"";
background: #fbd43b;
width: 20px;
height: 5px;
display: inline-block;
position: absolute;
bottom: -12px;
left: 0;
}
.b4 dl{
display: block;
padding: 0 20px 40px;
}
.b4 dl dt{
margin: 0 0 20px;
text-align: center;
}
.b5{
margin: 0 20px 40px;
text-align: center;
}
.b5 img{
margin-bottom: 15px;
}
.b6 ol{
display: block;
margin: 0 20px 40px;
}
.b6 ol li{
width: auto;
margin-bottom: 36px;
}
.b6 ol li:after{
margin-left: 0.5em;
content: '\f0d7';
position: absolute;
right: calc(50% - 8px);
top:auto;
bottom: -36px;
font-size: 2.2rem;
}
.b6 ol li h3{
color: #fff;
background: #0120b8;
font-weight: bold;
font-size: 1.6rem;
padding: 32px 0 28px 26px;
border-radius: 10px 10px 0 0;
}
.b6 ol li h3 i{
margin-right: 5px;
}
.b6 ol li:nth-of-type(1) h3 i{ color: #019fe8; }
.b6 ol li:nth-of-type(2) h3 i{ color: #019fe8; }
.b6 ol li:nth-of-type(3) h3 i{ color: #ffff05; }
.b6 ol li p{
padding: 24px 32px;
background: #f3f3f3;
border-radius: 0 0 10px 10px;
}
.b7{
margin: 0 20px 30px;
}
.b7>p{
text-align: right;
}
.b7 .price-box{
display: block;
padding-bottom: 0;
}
.b7 .price-box h3{
font-size: 1.6rem;
padding: 16px 0;
width: auto;
}
.b7 .price-box .info{
width: auto;
}
.b7 .price-box dl{
width: auto !important;
margin-bottom: 20px;
}
.b7 .price-box dl.single{
width: 100%;
}
.b7 .price-box dl dt{
padding: 16px;
width: 45%;
}
.b7 .price-box h4{
font-size: 1.6rem;
}
.b7 .price-box dl dd{
padding: 16px;
width: 55%;
font-size: 1.4rem;
}
.b7 .price-box dl.single dd{
padding: 0 16px;
}
.b7 .price-box dl dd .price{
color: #0120b8;
}
.b7 .price-box dl dd .price b{
font-size: 2.4rem;
}
.b7 .price-box:first-of-type dl dd .price b{
font-size: 3.6rem;
}
.b7 .price-box table.table-s{
width: 100%;
}
.b8,
.b9{
text-align: center;
margin-bottom: 80px;
}
.note2 + .price-box{
margin-top: 40px;
}
.price-b2 dl{
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
background: #f3f3f3;
}
.price-b2 dl dt{
background: #e5e5e5;
padding: 24px;
width: 55%;
}
.price-b2 dl dt h4{
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 6px;
}
.price-b2 dl dd{
padding: 24px 16px;
width: 45%;
color: #666;
font-size: 1.6rem;
font-weight: bold;
text-align: right;
line-height: 1.25;
}
.price-b2 dl dd .price{
color: #0120b8;
}
.price-b2 dl dd .price b{
font-size: 3.6rem;
}
.price-b2 p.center{
margin-top: 36px;
}
.box-inq .nav>li .tel{
font-size: 4.8rem;
font-weight: bold;
}
.box-inq .nav>li .time{
font-size: 1.8rem;
}
.box-inq .nav>li .tel:before{
content: "";
display: inline-block;
background:url(../images/collabo/icon-freecall.png);
width: 56px;
height: 44px;
vertical-align: middle;
margin-right: 6px;
}
.tel-l{
font-size: 4rem;
}
.tel-l:before{
content: "";
display: inline-block;
background:url(../images/collabo/icon-freecall.png);
width: 56px;
height: 44px;
vertical-align: middle;
margin-right: 6px;
}
.b-note {
padding: 16px;
margin: 30px 0 0;
}
.b-h3 {
/*margin: 0 20px 40px;*/
margin: 0 0 30px;
}
.b-intro dl {
display: flex;
justify-content: space-between;
padding: 0 40px 50px 20px;
}
.b-intro dl dt {
width: 280px;
margin-right: 40px;
}
.b-intro dl dd {
flex: 1;
}
.col2 {
display: flex;
justify-content: space-between;
}
.col2-s {
display: flex;
justify-content: flex-start;
}
.col2-s li {
margin-right: 40px;
}
.note1 {
background: #0120b8;
padding: 30px 50px;
margin: 0 20px;
}
.note1 p {
background: url("../images/collabo_wifi/icon2.png") no-repeat left top;
padding: 0 0 0 38px;
color: #fff;
font-weight: bold;
font-size: 2rem;
line-height: 1.4;
}
.note1-center {
text-align: center;
}
.note1-center p {
display: inline-block;
}
.note2{
padding: 16px 20px;
/*margin: 0 20px;*/
}
.note2 h3{
font-weight: bold;
margin-bottom: 10px;
font-size: 1.6rem;
}
.note3{
font-size: 1.2rem;
padding: 16px 0;
}
.pagelist{
margin-bottom: 60px;
}
.pagelist ul{
display: flex;
justify-content:space-between;
border-bottom: solid 2px #fbd43b;
margin-bottom: 20px;
}
.pagelist ul li{
padding:0 0 15px;
position: relative;
}
.pagelist ul li:after{
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #fbd53b transparent transparent transparent;
bottom: -6px;
left: calc(50% - 6px);
}
.pagelist ul li a{
font-size: 1.4rem;
font-weight: bold;
color: #0120b8;
}
.news-b {
padding-top: 0;
}
.news-b ul.tabn {
flex-wrap:wrap;
margin: 35px 20px 0;
}
.news-b ul.tabn li {
width: 48%;
margin-bottom: 15px;
}
.news-b ul.tabn li a {
width: 100%;
padding: 10px 0;
font-weight: bold;
border-radius: 10px;
background: #f3f3f3;
display: inline-block;
}
.news-b .tabn li a:hover, .news-b .tab-box-cr-1 li.tabn-1 a, .news-b .tab-box-cr-2 li.tabn-2 a, .news-b .tab-box-cr-3 li.tabn-3 a, .news-b .tab-box-cr-4 li.tabn-4 a {
background-color: #0021ba;
color: #fff !important;
}
.news-b .tab_content li {
padding: 20px;
}
.news-b .tab_content li .genre {
width: auto;
float: none;
margin-bottom:6px;
}
.news-b .tab_content li dl {
margin-left: 0;
display: flex;
justify-content: flex-start;
line-height: 20px;
text-align: left;
}
.news-b .tab_content li dl dt {
color: #b9bbbe;
margin-right: 10px;
}
.news-b .tab_content li.new dl dd:after {
font-size: 1rem;
padding: 0 0.5em;
margin-left: 12px;
}
.tile-b {
padding: 20px;
}
.tile-b ul {
max-width: 780px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tile-b ul li {
width: 30%;
display: inline;
margin-bottom: 16px;
}
.tile-b ul li a {
width: 100%;
height: 100%;
margin: 16px 0;
padding: 32px 10px 0;
font-size: 1.4rem;
}
.tile-b ul li a small {
display: block;
font-size: 1.2rem;
}
.tile-b ul li a:before {
content: "";
display: block;
width: 76px;
height: 54px;
margin: 0 auto 10px;
background-size: 76px 76px;
background-position: 0 -8px;
}
.bg-sky{
padding: 20px;
margin-top: 40px;
}
.bg-sky .btn-xl{
padding-left: 20px;
padding-right: 20px;
}
/* table */
.table-s, .table-recruit, .table-tokyo_ic, .table-l, .table01 {
border: solid 1px #ccc;
border-collapse: collapse;
border-spacing: 0;
line-height: 1.5;
width: 100%;
}
.table-recruit, .table-tokyo_ic {
border: none;
}
.table-s th, .table-recruit th, .table-tokyo_ic th, .table-l th, .table01 th {
border: solid 1px #ccc;
background: #f3f3f3;
font-weight: bold;
text-align: center;
padding: 8px 12px;
}
.table-recruit th, .table-tokyo_ic th {
width: 22%;
background: #0120b8;
color: #fff;
border: none;
border-bottom: solid 2px #fff;
}
.table-tokyo_ic th {
background: #a1ccd4;
text-align: left;
}
.table-s td, .table-recruit td, .table-tokyo_ic td, .table-l td, .table01 td {
border: solid 1px #ccc;
background: #fff;
text-align: left;
padding: 8px 12px;
}
.table-recruit td, .table-tokyo_ic td {
width: 78%;
border: none;
background: #f3f3f3;
border-bottom: solid 2px #fff;
}
.table-l th, .table-l td {
padding: 14px 20px;
}
.table-f {
margin-bottom: 40px;
}
.table-f th, .table-f td {
padding: 18px 20px;
}
.table-f th {
width: 28%;
background: #f3f3f3;
font-weight: bold;
}
.table-f td .ttl-h4 {
margin: 0 0 0.5em;
}
.table-f .must {
font-size: 1.2rem;
padding: 2px 5px;
background: #ff9393;
color: #fff;
border-radius: 2px;
margin-right: 5px;
position: relative;
}
.table-f .wpcf7-checkbox, .table-f .wpcf7-radio {
display: inline-block;
margin-left: -1em;
}
span.wpcf7-not-valid-tip:before {
font-family: "Font Awesome 5 Free";
content: '\f06a';
font-weight: 900;
margin-right: 5px;
}
.table-f th, .table-f td {
display: block !important;
width: 100% !important;
border-top: none !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.table-f tr:first-child th {
border-top: 1px solid #d7d7d7 !important;
}
/* 必須・任意のサイズ調整 */
.table-f .haveto, .table-f .any {
font-size: 10px;
}
.table-f th {
border: solid 1px #d7d7d7;
}
.table-f td {
border: solid 1px #d7d7d7;
}
.entry-content .table-f tr, .entry-content table {
border: solid 1px #d7d7d7;
}
.verticallist .wpcf7-list-item {
display: block;
}
/*reCAPTCHA badge*/
.grecaptcha-badge {
margin: 40px auto 0;
}
/* </ MODULE> */
/* <HEADER> */
#header {
padding: 0;
width: 100%;
height: 52px;
position: fixed;
top: 0;
left: 0;
z-index: 100001;
background: #fff;
}
#header .subnav,#header .tel,#header .gnav1,#header .gnav2,#header .mnav,#header .body #search-box{
display: none;
}
#header .body .logo {
padding: 16px 0 0 20px;
}
#header .body .logo img {
height: 20px;
}
/* </ HEADER> */
/* <FOOTER> */
#footer{
display: none;
}
.copy {
margin-top: 40px;
}
/* </ FOOTER> */
/* <GNAV> */
.gnav1 {
background: #0021ba;
}
.gnav2 {
background: #f3f3f3;
}
#footer .gnav2 {
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
}
.gnav3 {
background: #232323;
}
.gnav1 ul, .gnav2 ul, .gnav3 ul {
max-width: 940px;
margin: 0 auto;
position: relative;
display: flex;
justify-content: flex-start;
}
.gnav1 ul li, .gnav2 ul li, .gnav3 ul li {
display: inline;
flex-grow: 1;
}
.gnav1 ul li a {
text-align: center;
color: #fff;
font-weight: bold;
padding: 11px 0 0;
height: 80px;
box-sizing: border-box;
display: block;
position: relative;
letter-spacing: .07em;
}
.gnav2 ul li a {
text-align: center;
line-height: 40px;
display: block;
position: relative;
letter-spacing: .07em;
}
.gnav3 ul li a {
color: #fff;
font-weight: bold;
text-align: center;
line-height: 50px;
display: block;
position: relative;
letter-spacing: .07em;
}
.gnav1 li a:before {
content: "";
display: block;
margin: 0 auto;
width: 32px;
height: 32px;
}
.gnav1 li:nth-of-type(1) a:before {
background-image: url(../images/header/gnav1-icon1.png);
}
.gnav1 li:nth-of-type(2) a:before {
background-image: url(../images/header/gnav1-icon2.png);
}
.gnav1 li:nth-of-type(3) a:before {
background-image: url(../images/header/gnav1-icon3.png);
}
.gnav1 li:nth-of-type(4) a:before {
background-image: url(../images/header/gnav1-icon4.png);
}
.gnav1 li:nth-of-type(5) a:before {
background-image: url(../images/header/gnav1-icon5.png);
}
.gnav1 li:nth-of-type(6) a:before {
background-image: url(../images/header/gnav1-icon6.png);
}
.gnav1 li:nth-of-type(7) a:before {
background-image: url(../images/header/gnav1-icon7.png);
}
.gnav1 li a:after, .gnav1 ul:before {
height: 60px;
background: #1c3cd1;
top: 10px;
}
.gnav2 ul li a:after, .gnav2 ul:before {
height: 30px;
background: #dddddd;
top: 5px;
}
.gnav1 li a:after, .gnav1 ul:before, .gnav2 ul li a:after, .gnav2 ul:before {
content: "";
display: block;
margin: 0 auto;
width: 1px;
right: 0px;
position: absolute;
z-index: 2;
}
.gnav1 ul:before, .gnav2 ul:before {
right: auto;
left: 0;
}
/* </ GNAV> */
/* <OTHER LIBRARY> */
.wrapper {
position: relative;
overflow-x: hidden;
right: 0;
min-width: initial;
padding-top: 52px;
}
#breadcramb{
display: none;
}
#article{
max-width: 940px;
margin: 0 auto;
padding:0 20px;
text-align: left;
}
#article a{
color: #0120b8;
text-decoration: underline;
}
#article a:hover{
text-decoration: none;
}
#article img{
height:auto;
}
/* pager */
.wp-pagenavi, .gsc-cursor-box {
clear: both;
margin: 30px 0;
text-align: center !important;
}
.wp-pagenavi a, .wp-pagenavi span, .gsc-cursor-page {
text-decoration: none;
border: 1px solid #32C8D4 !important;
padding: 6px 10px;
margin: 2px;
color: #333 !important;
white-space: nowrap;
line-height: 16px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current, .wp-pagenavi a.last, .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink, .gsc-cursor-page:hover {
background: #32C8D4 !important;
color: #fff !important;
}
.wp-pagenavi span.current {
font-weight: bold;
}
.gsc-cursor-current-page {
font-weight: bold !important;
background: #32C8D4 !important;
color: #fff !important;
}
/* </ OTHER LIBRARY> */
.form-b{
margin: 0 20px 40px;
}
.form-b dl{
display: block;
margin-bottom: 20px;
}
.form-b dl dt{
width: auto;
padding: 0 10px;
}
.form-b dl dt .must+span{
padding-left: 50px;
display: inline-block;
}
.form-b dl dd{
flex:1;
padding: 0 15px;
margin: 10px 0;
}
.form-b dl dd input[type="text"],
.form-b dl dd input[type="tel"],
.form-b dl dd input[type="email"],
.form-b dl dd select,
.form-b dl dd textarea {
width: auto;
max-width: 85%;
}
.form-b dl dd input[type="tel"]#zip{
max-width: 200px;
}
.form-b input[type="submit"]{
color: #000;
background: -webkit-linear-gradient(#f7e755 0%, #f4c229 100%);
background: -o-linear-gradient(#f7e755 0%, #f4c229 100%);
background: linear-gradient(#f7e755 0%, #f4c229 100%);
font-weight: bold;
min-width: 1px;
margin-top: 20px;
}
.catenav{
margin: 20px 20px;
border: solid 1px #0120b8;
border-radius: 5px;
}
.catenav h3{
display: block;
color: #0120b8;
padding: 12px 15px;
text-align: left;
position: relative;
}
.catenav h3:after {
font-family: "Font Awesome 5 Free";
content: '\f107';
font-weight: 900;
color: #0120b8;
vertical-align: middle;
right: 12px;
top: calc(50% - 0.6em);
position: absolute;
}
.catenav h3.close:after {
content: '\f106';
}
.catenav ul {
padding: 4px 0;
display: none;
margin: 0 auto;
}
.catenav:before {
content: none;
}
.catenav ul li a {
padding: 12px 15px;
min-height: 1px;
display: block;
text-align: left;
border-bottom: dotted 1px #fff;
position: relative;
}
.catenav ul li a:after {
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
color: #0120b8;
vertical-align: middle;
right: 12px;
top: calc(50% - 0.8em);
position: absolute;
}
.catenav ul li a br{
display: none;
}
.b-red {
margin: 40px 20px;
}
.b2 .note {
margin: 0 20px;
padding: 20px 30px;
}
.faq-inq-b .center br{
display:none;
}
}
/*23.12.11 added*/
.pc-col2{
display: flex;
justify-content: flex-start;
gap: 50px;
}
@media screen and (max-width: 960px) {
#article>div{
max-width: 100%;
}
.sp-col1{
gap: 30px;
flex-direction: column;
align-items: center;
}
}
/*25.03.07 GNAV2*/
.mnav2 > ul > li.menu_list1 > a {
background: #4BA633;
}
.mnav2 > ul > li.menu_list3 > a {
background: #E57C02;
}
.mnav2>ul>li.menu_list1>a:before,
.mnav2>ul>li.menu_list1>a:after,
.mnav2>ul>li.menu_list3>a:after{
content: none;
}
.mnav2>ul>li:first-of-type>a:before{
left:0;
right: auto;
}
.mnav2 {
background: #0021ba;
max-width: 940px;
margin: 0 auto;
}
.mnav2>ul{
max-width: 940px;
margin: 0 auto;
position: relative;
display: flex;
justify-content: flex-start;
}
.mnav2>ul>li{
display: inline;
flex-grow: 1;
}
.mnav2>ul>li>a {
text-align: center;
color: #fff;
font-weight: bold;
padding: 12px 0;
box-sizing: border-box;
display: block;
position: relative;
letter-spacing: .07em;
}
.mnav2>ul>li.hov>a {
background: #f3f3f3;
color: #000;
z-index: 4;
}
.mnav2>ul>li>a:after{
height: 30px;
background: #1c3cd1;
top: 10px;
content: "";
display: block;
margin: 0 auto;
width: 1px;
right: 0;
position: absolute;
z-index: 2;
}
.menu_contents {
background: #f3f3f3;
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px;
z-index: 99;
box-shadow:0px 5px 5px rgba(0,0,0,0.3);
}
.menu_contents .inner{
max-width: 940px;
margin: 0 auto;
font-size: 1.2rem;
text-align: left;
}
.menu_contents .nav1{
background: #fff;
display: flex;
justify-content:flex-start;
flex-wrap:wrap;
padding: 20px 0;
}
.menu_contents .nav1 a:hover img{
opacity:0.7;
}
.menu_contents .nav1 ul.top,
.menu_contents .nav1 ul.bottom{
width:860px;
margin:0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.menu_contents .nav1 ul.bottom{
margin-top:30px;
grid-template-columns: 329px 157px 157px 157px;
}
.menu_contents .nav1 ul.bottom li{
border:solid 3px #dbedd6;
border-radius:20px;
padding:10px 0;
text-align:center;
}
.menu_contents .nav1 ul.bottom li h2{
font-size:12px;
margin-bottom:10px;
color:#4BA633;
}
.menu_contents .nav1 ul.bottom li p{
display: flex;
justify-content: center;
gap:25px;
}
.menu_list3 .menu_contents ul{
width:860px;
margin:0 auto;
display:grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(3, 55px);
gap:17px 20px;
}
.menu_list3 .menu_contents ul li:nth-of-type(1),
.menu_list3 .menu_contents ul li:nth-of-type(2){
grid-row: 1 / 4;
}
.menu_contents .ttl{
font-size: 1.4rem;
font-weight: bold;
color:#0021ba;
border-bottom: solid 1px #0021ba;
padding: 0 0 4px;
margin-top: 20px;
}
.menu_contents .ttl a{
display: inline-block;
position: relative;
}
.menu_contents .ttl a:after{
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
position: absolute;
right: -20px;
top: calc(50% - 0.8em);
color: #0021ba;
}
.menu_contents .topics{
border-right: solid 1px #ccc;
}
.menu_contents .topics:last-of-type{
border-right: none;
}
.menu_contents .topics{
width: 25%;
}
.menu_contents .nav1 .topics{
width: 23%;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3){
width: 31%;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3) ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3) ul li{
width:50%;
}
.menu_list1 .menu_contents .nav1 .topics:nth-of-type(3) ul li:nth-of-type(n+7){
width:100%;
}
.menu_contents .topics-full{
border-right: none;
width: 100% !important;
}
.menu_contents .topics h3{
font-size: 1.4rem;
padding-left: 20px;
text-align: left;
}
.menu_contents .topics h3 a{
display: block;
position: relative;
}
.menu_contents .topics h3 a:after{
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
position: absolute;
right: 20px;
top: calc(50% - 0.5em);
color: #0021ba;
}
.menu_contents .topics h3 i{
width: 24px;
height: 24px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
margin-top: -3px;
}
.menu_contents .topics h3 i.tv{ background-image: url("../images/common/header-tv.png"); }
.menu_contents .topics h3 i.net{ background-image: url("../images/common/header-net.png"); }
.menu_contents .topics h3 i.tel{ background-image: url("../images/common/header-tel.png"); }
.menu_contents .topics h3 i.ryokin{ background-image: url("../images/common/header-ryokin.png"); }
.menu_contents .topics h3+h3,
.menu_contents .topics h3+ul{
margin-top: 12px;
}
.menu_contents .topics li{
margin-bottom: 8px;
padding-left: 20px;
}
.menu_contents .topics li:last-of-type{
margin-bottom: 0;
}
.menu_contents .topics li a{
display: block;
position: relative;
}
.menu_contents .topics li .new{
background: #ba0000;
color: #fff;
padding: 1px 4px;
margin-right: 3px;
}
.menu_contents .topics li a .new{
color: #fff;
text-decoration:none;
}
@media screen and (max-width: 960px) {
#header .mnav2{
display: none;
}
}
/* 25.03.07 OFFCANVAS*/
#offcanvas-menu{
padding-left:30px;
padding-right:30px;
padding-bottom:20px;
box-sizing: border-box;
border-bottom:solid 2px #0021BA;
}
#offcanvas-menu #search-box {
float: none;
width: auto;
padding: 18px 0;
}
#offcanvas-menu #search-box .search-box-inner {
display: grid;
grid-template-columns: 1fr 45px;
}
#offcanvas-menu .search-box-inner input[type="text"] {
/*width: calc(100vw - 105px);*/
width:100%;
}
#offcanvas-menu .search-box-inner button {
padding: 3px 10px;
}
#offcanvas-menu .tab-btn {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#offcanvas-menu .tab-btn .btn{
text-align: center;
}
#offcanvas-menu .tab-btn .btn a {
display: block;
font-size: 11px;
padding: 8px 0;
text-decoration: none;
line-height: 1.2;
background-color: #fff;
cursor: pointer;
border-radius:5px 5px 0 0;
}
#offcanvas-menu .tab-btn .btn a[data-tab="#menu1"],#tab-contents #menu1{ background-color: #c9e5c2; }
#offcanvas-menu .tab-btn .btn a[data-tab="#menu2"],#tab-contents #menu2{ background-color: #f8d8b4; }
#offcanvas-menu .tab-btn .btn a[data-tab="#menu3"],#tab-contents #menu3{ background-color: #ebb3c4; }
#tab-contents .inner{
border-radius:20px;
padding:14px;
}
#tab-contents .inner li{
background:#fff;
border-radius:5px;
}
#tab-contents .inner li+li{
margin-top:10px;
}
#tab-contents .inner li>a {
display: flex;
align-items: center;
}
#tab-contents .inner li>a>p{
text-align: left;
line-height: 1.2;
}
#tab-contents .inner li>a>p span{
font-size:11px;
display:block;
}
#tab-contents .inner li.top{
margin:0 0 10px;
padding:10px;
border-radius:20px;
}
#tab-contents .inner li.top .main a{
display: flex;
align-items: center;
border:solid 3px #c9e5c2;
border-radius:15px;
padding:10px;
height:52px;
justify-content: space-between;
}
#tab-contents .inner li.top .sub{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top:10px;
}
#tab-contents .inner li.top .sub a{
background:#edf7eb;
border-radius:15px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.tab-contents-item {
display: none;
border-radius:0 0 5px 5px;
}
.tab-contents-item.is-active {
display: block;
}
.tab-contents-item.is-active>p {
animation: fadeinAnime 2s forwards;
}
@keyframes fadeinAnime{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#offcanvas-menu .common{
margin-top:20px;
}
#offcanvas-menu .common .link a{
background: #EFEFEF;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
position:relative;
margin: 10px 0;
}
#offcanvas-menu .common .link a img,
#offcanvas-menu .common .bnr a.button img{
position:absolute;
right: 20px;
}
#offcanvas-menu .common .bnr{
margin:10px 0;
}
#offcanvas-menu .common .bnr p{
font-size:11px;
}
#offcanvas-menu .common .bnr a.button{
border-radius: 5px;
background: linear-gradient(180deg, #F6E250 0%, #F5C52D 78%);
height:40px;
display: flex;
justify-content: center;
align-items: center;
position:relative;
}
#offcanvas-menu .common .close{
background:#0021BA;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
margin-top:20px;
}