@charset "utf-8";
/* CSS Document */

.pc_size{display:block;}
.sp_size{display:none;}

@media (max-width: 768px)  {
.pc_size{display:none !important;}
.sp_size{display:block;}
}

.mtb16 {margin-top: 16px;
margin-bottom: 16px;}

.btn a {
color: #4d4d4d;
border: #4d4d4d 1px solid;
border-radius: 4px;
text-align: center;
padding: 18px;
box-sizing: border-box;
display: inline-block;
min-width: 160px;
margin-top: 32px;
position: relative;
top: 0;
-webkit-transition: .0.5s;
transition: .0.5s;
}
@media (max-width: 768px)  {
.btn a {display: block;}}

.btn a:hover {top: 2px;
-webkit-transition: .1s;
transition: .1s;}

.innner {max-width: 1200px;
margin: 0 auto;}

header {border-top: 3px solid #0068B6;}
@media (max-width: 768px)  {
header {border-top: none;}}

.center {text-align: center;}
.bule_text {color: #0068b6;}
.red_text {color: #c00014;}

h1 {
font-size: 24px;
margin: 0.5rem 0;
color: #4d4d4d;
line-height: 1.8rem;
}

a[target="_blank"]::after {
content: '';
background-image: url("../images/icon_blank.png");
background-size: contain;
height: 12px;
width: 12px;
display: inline-block;
margin-left: 8px;
}

.flex_dl {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 8px;
}

.flex_dl dt {
width: 30%;
max-width: 9rem;
background-color: #EEE  !important;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 1px;
font-weight: normal;
}
@media (max-width: 768px)  {
.flex_dl dt {
width: 100%;
max-width: 100%;
padding-bottom: 4px;
margin-bottom: 8px;
}}

.flex_dl dd {
width: 70%;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 768px)  {
.flex_dl dd {width: 100%;}}

#sns a[target="_blank"]::after, .no_blankicon[target="_blank"]::after {
background-image: none;
margin-left: 0;
width: 0;
height: 0;
display: none;
}

#pc_header {
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
padding: 16px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 80px;
}

#pc_header nav {
display: flex;
-webkit-display: flex;
align-items: center !important;
-webkit-align-items: center !important;
width: 100%;
}

#pc_header nav ul {
display: block;
-webkit-display: flex;
}

#pc_header nav ul li {
margin-left: 16px;
display: inline-block;
-webkit-display: flex;
align-items: center !important;
-webkit-align-items: center !important;
}

#pc_header nav a {color: #666;}

#pc_header .orange_btn {margin-left: auto;}

.sp_size header .orange_btn {margin-left: auto;
margin-right: 48px;}

.orange_btn a {
background: #f8e71c;
color: #4a4a4a !important;
border-radius: 4px;
height: 50px;
line-height: 50px;
display: block;
padding: 0 16px;
text-align: center;
position: relative;
top: 0;
-webkit-transition: .0.5s;
transition: .0.5s;
}

.orange_btn a:hover {top: 2px;
-webkit-transition: .1s;
transition: .1s;}

.orange_btn a img {margin: -4px 8px 0 0;}

@media (max-width: 768px)  {
.orange_btn a {
height: 35px;
line-height: 35px;
padding: 0 8px;
font-size: 12px;
}}

#main_img {
background: url(../images/main_img.jpg);
background-size: cover;
height: 400px;
color: #FFF;
width: 100%;
overflow: hidden;
text-align: center;
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}

@media (max-width: 768px)  {
#main_img h1 {width: 95%;}}

#main_img h2  {
text-align: left;
width: 500px;
margin: 0 auto;
display: block;
}
@media (max-width: 768px)  {
#main_img h2  {width: 90%;
font-size: 1rem;}}

#row_nav ul {}
@media (max-width: 768px)  {
#row_nav ul {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin: -0.5rem 0 16px 0;}}

#row_nav ul a {
margin:16px;
color: #666;
display: inline-block;
}
@media (max-width: 768px)  {
#row_nav ul a {
margin: 8px;
font-size: 14px;
}}

#column {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 16px;
}

#left_column {width: 20%;}
@media (max-width: 768px)  {
#left_column {width: 100%;}}

#right_column {width: 80%;}
@media (max-width: 768px)  {
#right_column {width: 100%;}}

#right_column img {
margin-bottom: 16px;
}

#row h1 {background: #0068b6;
color: #FFF;
padding: 8px 16px;}

#row section h1 {
    color: #0068b6;
    padding: 8px 0;
    background: none;
    border-bottom: #0068b6 solid 2px;
    margin-bottom: 16px;
}

.title {color: #0068b6 !important;
background: none !important;
padding: 0 0 8px 0 !important;}

#right_column h2 {
    color: #4d4d4d;
    font-size: 18px;
    display: block;
    margin-top: 48px;
}

#right_column h3 {
    color: #4d4d4d;
    font-size: 16px;
    display: block;
    margin-top: 24px;
    margin-bottom: 4px;
}

#right_column h4 {
    color: #4d4d4d;
    font-size: 16px;
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
}

.service .innner {
display: flex;
-webkit-display: flex;
padding: 60px 0;
}
@media (max-width: 768px)  {
.service .innner {
flex-wrap: wrap;
padding: 0;
-webkit-flex-wrap: wrap;
}}

#row .service {
display: flex;
-webkit-display: flex;
padding: 60px 0;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
@media (max-width: 768px)  {
#row .service {
flex-wrap: wrap;
padding: 60px 0 0 0;
-webkit-flex-wrap: wrap;
}}

@media (max-width: 768px)  {
.service {
padding: 60px 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}

.service_img {
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
width: 50%;
}

@media (max-width: 768px)  {
.service_img {
width: 100%;
margin: 0 auto 32px auto;
display: block;
text-align: center;
}}

.service_img img {max-width: 300px;
height: auto;}

@media (max-width: 768px)  {
.service_img img {width: 100%}}

.service_text {width: 50%;}
@media (max-width: 768px)  {
.service_text {width: 100%;}}

.service_text h2 {margin-top: 8px;}

#row .service h1 {
width: 100%;
margin-bottom: 32px;
}

@media (max-width: 768px)  {
#news {
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}

#news a {
color: #4d4d4d;
display: inline-block;}
@media (max-width: 768px)  {
#news a {display: block;
}}

#news time {font-size:12px;
display: block;}

#news .innner {
text-align: center;
}
@media (max-width: 768px)  {
#news .innner {margin-top:0;}}

#news ul {
margin: 0 auto;
width: 44%;
}
@media (max-width: 768px)  {
#news ul {width:100%; }}

#news li {
border-bottom: #4d4d4d solid 1px;
padding: 8px 0;
display: block;
text-align: left;
}

#news li a {display: block;}

.flex_img {
display: flex;
justify-content: space-around;
}

.flex_img img {
display: inline-block;
}

@media (max-width: 768px) {
.flex_img img {
width: 30%;
}
}

#case {padding: 60px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
@media (max-width: 768px)  {
#case {padding: 30px 0;
}}

#case h1 {text-align: center;
margin-bottom: 16px;}

#row #case h1 {text-align: left;}

#case ul {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
width: 90%;
margin: 0 auto;
}
@media (max-width: 768px)  {
#case ul {width: 100%;
justify-content: center;
-webkit-justify-content: center;
}}

#case li {
width: 160px;
margin: 16px 4%;
text-align: center;
}
@media (max-width: 768px)  {
#case li {margin: 16px 0;}}

.iframe-responsive {
position: relative;
width: 100%;
padding: calc(315 / 560 * 100%) 0 0;
margin-top: 60px;
}

#background-movie-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

footer {background: url(../images/footer_bg.jpg) #0068b6;
color: #FFF;
padding: 16px;
padding: 95px 0;}

footer .innner {display: flex;
-webkit-display: flex;}
@media (max-width: 768px)  {
footer .innner {
padding: 0 16px;
display: block;
}}

footer .innner div:first-child {
text-align: center;
width: 50%;
}
@media (max-width: 768px)  {
footer .innner div:first-child {width: 100%;}}

footer .innner div:last-child nav {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
text-align: left;
width: 100%;
}

footer .innner div:last-child nav ul li:first-child {
border-bottom: #FFF solid 1px;
font-weight: bold;
margin-bottom: 8px;
}
@media (max-width: 768px)  {
footer .innner div:last-child nav ul li:first-child {
margin-top: 32px;
}}

footer .innner div:last-child nav ul li {
width: 150px;
margin-right: 16px;
padding-bottom: 8px;
}
@media (max-width: 768px)  {
footer .innner div:last-child nav ul li {margin-right: 12px;}}

footer a {color: #FFF;}

footer address {margin: 90px 0 60px 0;}

#sns {
display: flex;
-webkit-display: flex;
justify-content: space-between;
-webkit-justify-content: space-between;
margin: 0 auto;
width: 280px;
}
@media (max-width: 768px)  {
#sns {margin-bottom: 48px;}}

#sns li {text-align: center;}

#sns li a {
width: 80px;
height: 80px;
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
border-radius: 40px;
background: #FFF;
line-height: 80px;
position: relative;
-webkit-transition: .0.5s;
transition: .0.5s;
}

#sns li a:hover {top: 2px;
-webkit-transition: .1s;
transition: .1s;}

#map {width: 100%;}

#copyright { text-align: center;
background: #0068b6;
color: #FFF;}

#row .innner {padding: 16px;}
@media (max-width: 768px)  {
#row .innner {
margin-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}

/* movie */
#customElement {
width: 100%;
height: calc(100vw * 9 / 16);
position: relative;
top: 0;
left: 0;
z-index: 0;
background: url("assets/ytplayer_img.jpg") no-repeat center center;
background-size: cover;
}

#iframe_customElement {height: calc(100vw * 9 / 16) !important;}

/* movie */
@media screen and (max-width: 768px){
#myPlayer {display: none;}
}

.notice {
background: #EEE;
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 8px;
margin-top: 32px;
}

.notice li {text-indent: -2.2rem;
margin-left: 2rem;
margin-bottom: 8px;}

#vist a {border-bottom: #CCC solid 1px}

.dl_wrap dl {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

.dl_wrap dl dt {
width: 15%;
margin-bottom: 16px;
background: #EEE;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 768px){
.dl_wrap dl dt {width: 100%;
margin-bottom: 0px;}}

.dl_wrap dl dd {
width: 85%;
margin-bottom: 16px;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 768px){
.dl_wrap dl dd {width: 100%;
margin-bottom: 8px;}}

#o2o ul {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin:16px 0 32px 0;
}

#o2o ul li {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
-webkit-align-items: center;
margin-bottom: 4px;
width: 50%;
}
@media screen and (max-width: 768px){
#o2o ul li {width: 100%;}}

#o2o ul li div:first-child {
width: auto;
margin-right: 16px;
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
height: 70px;
}

#o2o ul li div:last-child {
width: calc(100% - 96px);
height: 80px;
}

#o2o ul li img {
width: auto;
height: 80px;
margin-bottom: 0 !important;
}

#o2o h3 {margin-bottom: 0;}

#feature {
display: flex;
-webkit-display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
margin: 32px 0;
color: #0068b6;
font-weight: bold;
}

#feature li {text-align: center;}

.icon_list li {
display: flex;
-webkit-display: flex;
margin-bottom: 16px;
}

.icon_list h2 {margin: 0;}

.icon_list li div:first-child {width: 50px;
margin-right: 16px;}
.icon_list li div:last-child {width: calc(100% - 66px);}

.thin_wrap {width: 600px;
margin: 0 auto;}
@media screen and (max-width: 768px){
.thin_wrap {width: 100%;}}

#onestop {border: #a5c9e5 solid 3px;
border-radius: 10px;
padding: 16px;
}

#onestop img {margin: 0;}

.case_list {display: flex;
-webkit-display: flex;
margin: 16px 0 32px 0;}
@media screen and (max-width: 768px){
.case_list {display: block;}}

.case_list img {margin: 0 !important;}

.case_list h1 {padding-top: 0 !important;}

.case_list div:first-child {
width: 15%;
min-width: 150px;
}
@media screen and (max-width: 768px){
.case_list div:first-child {width: 100%;
margin-bottom: 16px;
margin-right: 0;
text-align: center;}}

.app_box {
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
margin: 16px 0 32px 0;
font-size: 12px;
}
@media screen and (max-width: 768px){
.app_box {flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 32px;
}}

.app_box div:first-child {
margin-right: 16px;
width: 50%;
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
max-width: 200px;
}
@media screen and (max-width: 768px){
.app_box div:first-child {justify-content: center;
-webkit-justify-content: center;
width: 100%;
max-width: 100%;
margin-bottom: 16px;}}

.app_box div:first-child img {margin-bottom: 0 !important;
border: solid #CCC 1px;
border-radius: 40px;
margin: 0 auto;
}

@media screen and (max-width: 768px){
.app_box div:last-child {display: flex;
-webkit-display: flex;
}}

@media screen and (max-width: 768px){
.app_box div:last-child span {text-align: center;}}

@media screen and (max-width: 768px){
.app_box div:last-child img {max-width: 90%;}}

.app_btn {margin-top: 16px;}

#web_case_wrap {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 16px;
}

.web_case {
display: flex;
-webkit-display: flex;
width: 50%;
margin-bottom: 16px;
}
@media screen and (max-width: 768px){
.web_case {
width: 100%;
margin-bottom: 32px;
}}

.web_case div:first-child {margin-right: 16px;}

.web_case img {margin-bottom: 0 !important;}

#company_logo ul {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-around;
-webkit-justify-content: space-around;
}

#company_logo ul li {width: 30%;}

/*----------------------------------------
news
----------------------------------------*/
#news_list a {color: #666;}

#news_list a:hover {text-decoration: none;}

#news_list time {
font-size: 12px;
width: 5.6rem;
display: inline-block;
}

#news_list span {
font-size: 12px;
background: #BBB;
color: #FFF;
padding: 2px 4px;
margin-left: 4px;
width: 5rem;
text-align: center;
display: inline-block;
}

#news_list li {margin-bottom: 16px;
border-bottom: #CCC solid 1px;
padding-bottom: 16px;}

#news_list li p {
margin: 6px 0 0 0;
display: block;
}

.dot_list li h3 {margin-bottom: 0;}

.dot_list li {margin-bottom: 8px;}

.dot_list .dot_list {margin-left: 1rem;}

/*----------------------------------------
privacy
----------------------------------------*/
.kaitei {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
width: 15rem;
margin-left: auto;
}

.kaitei dt {
line-height: 1rem;
padding: 0;
height: 1rem;
}

.kaitei dd {
height: 1rem;
line-height: 1rem;
}

#pv_mark {display: flex;
-webkit-display: flex;
margin:16px 0;}

.text_indent li {
text-indent: -8px;
margin: 0 0 8px 8px;
}

.text_indent li::before {
content: '・';
color: #666666;
display: inline-block;
font-size: 12px;
margin-right: 4px;
}

/*----------------------------------------
sitemap
----------------------------------------*/
.sitemap li a {
color: #666;
border-bottom: #CCC solid 1px;
padding:0 0 8px 8px;
margin-bottom: 8px;
display: block;
}

.sitemap li ul li a {border: none;}

.sitemap ul {margin-left:32px;}

/*----------------------------------------
form
----------------------------------------*/
#form {width: 640px;
margin: 0 auto;}
@media screen and (max-width: 768px){
#form {width: 100%;}}

.privacyText{
font-size: 90%;
line-height: 1.2;
width: 100%;
height: 180px;
border: 1px solid #CCC;
overflow-y: scroll;
padding: 1em;
margin-bottom: 16px;
}

.privacyText .kaitei {width: 13rem;}

input#submitBtn{
background:#f4ae00;
height: 3em;
line-height: 3em;
color:#FFF;
padding:0 3em;
margin:1em 0;
border-radius: 2em;
border:none;
font-weight: bold;
opacity: 1;
text-shadow: none;
}

input#submitBtn.notYet{
background:#999;
opacity: 0.5;
}

input#submitBtn.active:hover{
border-bottom:0;
top:2px;
position: relative;
}

label[for='privacyCheck']{
color: #666;
font-weight: 600;
}

input[type="text"] {
border-radius: 4px;
border: #CCC solid 1px;
margin-bottom: 16px;
width: 100%;
padding: 8px;
height: 3rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#from_category {
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
background: #EEE;
margin-bottom: 16px;
}

#from_category h2 {
	margin: 0;
}

.err {color: crimson;
font-weight: bold;
line-height: 1rem;}

dl.table{
margin-bottom:1em;
font-size: 93.75%;
}

dl.table dt{
float: left;
min-width: 6em;
white-space: nowrap;
}

dl.table dd{padding-left:6em;}

#input_wrap label {width: 100%;}

.caution {
font-size: 12px;
line-height: 16px;
margin-left: 8px;
color: #BBB;
}

#form_btn {
width: 100%;
display: block;
text-align: center;
}

.td input{display: none;}

.td input + label{
padding-left: 28px;
position: relative;
line-break: 26px;
height: 26px;
display: inline-block;
padding-top: 4px;
width: 100%;
}

.td input + label::before{
content: "";
display: block;
position: absolute;
top: 5px;
left: 0;
width: 22px;
height: 22px;
border: 1px solid #999;
border-radius: 50%;
}

.td input:checked + label{color: #0068b6;}

.td input:checked + label::after{
content: "";
display: block;
position: absolute;
top: 8px;
left: 3px;
width: 16px;
height: 16px;
background: #0068b6;
border-radius: 50%;
}

.custom_checkbox {display: none;}

#check_text {
padding-left: 24px;
position:relative;
}
#check_text::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 2px solid #999;
border-radius: 4px;
}
.custom_checkbox:checked + #check_text{color: #0067B6;}

.custom_checkbox:checked + #check_text::after{
content: "";
display: block;
position: absolute;
top: -2px;
left: 5px;
width: 10px;
height: 17px;
transform: rotate(40deg);
border-bottom: 4px solid #0067B6;
border-right: 4px solid #0067B6;
}

.require {position: relative;}

.require::after {content:'※';
display: inline-block;
margin-left: 8px;
font-size: 10px;
color: crimson;
position: absolute;
top:4px;
width: 2rem;
}

.conf_text {margin: 0px 0 16px 0;}

.confirm span {
color: #979797;
font-size: 14px;
}

.date {padding-bottom: 8px;
display: block;
color: #CCC;}

#company dl {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

#company dl dt {
width: 8rem;
background: #EEE;
padding: 8px;
margin-bottom: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#company dl dt:nth-child(4n+1) {
background: #e6e6e6 !important;
}

.kaitei dt:nth-child(4n+1), .table dt:nth-child(4n+1) {background: none !important;}

#company dd {
padding: 8px;
margin-bottom: 4px;
width: calc(100% - 8rem);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.circle_number li {
list-style: decimal inside;
text-indent: -1rem;
margin-left: 1rem;
}

.circle_number li span {
text-indent: 0rem;
font-weight: bold;
}

.circle_number li p {
display: block;
text-indent: 0;
}

.dott_list li {
list-style: disc inside;
text-indent: -1.5rem;
margin-left: 1.5rem;
margin-bottom: 4px;
}