@charset "utf-8";

body {
    color: #333;
    font-size: 16px;
    line-height: 1.4;
}
body, input, textarea, select, button {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-weight: normal; }

/* common */
.wrap {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.logo { width: 190px; }
.message {
    margin: 0 0 40px;
    color: #5a5a5a;
    line-height: 1.8;
}
.message.warning, .message.danger {
    border: 1px transparent solid;
    padding: 12px;
    border-radius: 4px;
}
.message.warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.message.danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.btn-group { margin: 65px 0 0; }
.btn {
    padding: 20px 0;
    display: inline-block;
    width: 14em;
    color: #fff;
    font-weight: bold;
    background: hsl(0, 0%, 50%);
    border-bottom: 4px hsl(0, 0%, 39%) solid;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
    border-radius: 2px;
}
.btn:hover, .btn:focus {
    background-color: hsl(0, 0%, 55%);
    border-color: hsl(0, 0%, 44%);
}
p.indent,
span.indent,
li.indent,
.indent li {
	padding-left: 1em;
	text-indent: -1em;
}
.list-area {
	margin-bottom: 40px;
}
.list-area li {
	padding-bottom: 10px;
}

.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* ----- header area ----- */
#header {
    position: relative;
    padding: 15px 0;
    border-bottom: 1px #093f9a solid;
    margin-bottom: 50px;
}
#header .logo { float: left; }

/* navigation */
#header nav {
    float: right;
    margin: 8px 0;
}
#header nav li {
    float: left;
}
#header nav li:not(:last-child) {
    margin-right: 25px;
}
#header nav li a {
    display: block;
    padding: 5px 0;
    color: #5a5a5a;
    text-decoration: none;
}
#header nav li a:hover { text-decoration: underline; }

/* ----- footer area ----- */
footer { padding: 160px 0 40px; }
footer nav { margin-bottom: 20px; }
footer nav li {
    float: left;
}
footer nav li:not(:last-child):after {
    content: "|";
    margin: 0 10px;
}
footer nav li a {
    display: inline-block;
    padding: 5px 0;
    color: #5a5a5a;
    text-decoration: none;
}
footer nav li a:hover { text-decoration: underline; }
footer .contact-info { margin-bottom: 40px; color: #5a5a5a; }
footer .contact-info h3 { margin-bottom: 6px; }
/* logo */
footer .logo { margin: 0 auto; }
/* copyright */
footer .copyright { font-family: helvetica; }

/* ----- each part ----- */
.jumbotron {
    margin-bottom: 70px;
    background: url(../imgs/main.jpg) no-repeat right bottom;
    -webkit-background-size: cover;
    background-size: cover;
    border-top: 1px #fff solid;
    border-bottom: 1px #fff solid;
    border-bottom: 1px #093f9a solid;
}
.register-confirm .jumbotron,
.register-thanks .jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
}
.jumbotron *[class^="text-"]:not(:last-child) { margin-bottom: 14px; }
.jumbotron .text-1 {
    color: #093f9a;
    letter-spacing: .07em;
    font-weight: 500;
}
.jumbotron .text-2 {
    letter-spacing: .06em;
}
.jumbotron .text-3 {
    letter-spacing: .1em;
    font-size: 337.5%;
}
.jumbotron + .flow-area {
    border-top: 1px #093f9a solid;
}

/* form area */
form.wrap { width: 740px; }
form h2 {
    position: relative;
    display: block;
    width: 26em;
    margin: 0 auto 65px;
    padding: 20px 0;
    background: #3590cb;
    color: #fff;
    border-radius: 99px;
}
form h2:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px transparent solid;
    border-top-color: #3590cb;
}
form hr {
    background: #c8c8c8;
    border: none;
}
form > p,
form > fieldset,
form > hr {
    margin-bottom: 30px;
    zoom: 1;
}
form > p:after,
form > fieldset:after {
    content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; overflow:hidden; font-size:0.1em;
}
form > p > label,
form > fieldset > legend {
    width: 30%;
    color: #3590cb;
    line-height: 1.4;
    vertical-align: top;
}
form > p > label,
form > p > label + *,
form > fieldset > legend,
form > fieldset > legend + * {
    float: left;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
form > p > label,
form > fieldset > legend {
    padding-left: 0;
}
form > fieldset > .fieldset,
form > p .select-wrap { padding: 0; }
form > p > label + *,
form > fieldset > legend + *,
form .caption {
    width: 70%;
}

.input-confirm {
    display: inline-block;
    padding: 10px;
    line-height: 1.4;
    border: 1px transparent solid;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

input, textarea, select {
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
}
select {
    line-height: 1.3;
}
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"],
input[type="file"],
select {
    padding: 10px;
    border: 1px #3590cb solid;
}
input[type="text"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
input[type="time"]:disabled,
input[type="number"]:disabled,
input[type="file"]:disabled {
    border-color: #ccc;
    background-color: #fafafa;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="file"]:focus,
input[type="submit"]:focus,
input[type="checkbox"]:focus + label:after,
input[type="radio"]:focus + label,
select:focus {
    -webkit-box-shadow: 0 0 2px 2px hsl(204, 59%, 80%);
    box-shadow: 0 0 2px 2px hsl(204, 59%, 80%);
}
input[type="checkbox"] + label:after {
    margin-top: -8px;
}
input[type="checkbox"]:checked + label:before {
    top: calc(50% - 14px);
}
input[type="checkbox"]:disabled + label {
    cursor: default;
    color: #cdcdcd;
}
input[type="checkbox"]:disabled + label:after {
    background-color: #f6f6f6;
    border: 1px #ccc solid;
}
input[type="submit"] {
    width: 14em;
    background: hsl(204, 59%, 50%);
    border-bottom: 4px hsl(204, 59%, 39%) solid;
}
input[type="submit"]:hover,
input[type="submit"]:focus { 
    background-color: hsl(204, 63%, 55%);
    border-color: hsl(204, 63%, 44%);
}
input[type="submit"]:disabled {
    color: #cdcdcd;
    background-color: #f6f6f6;
    cursor: default;
    border: 1px #ccc solid;
}

form > p .short,
form > fieldset > .fieldset.phone-number,
form > fieldset > .fieldset.person-name,
form > fieldset > .fieldset.birthday,
form > fieldset > .fieldset.postal-code {
    width: -webkit-calc(66.666666% * 0.8);
    width: calc(66.666666% * 0.8);
}
form .phone-number > *,
form .person-name > *,
form .postal-code > *,
form > fieldset > .fieldset.position > *,
form > fieldset > .fieldset.birthday > * {
    display: block;
    float: left;
}
form .phone-number .hyphen,
form .postal-code .hyphen,
form .person-name label { 
    text-align: center;
    padding: 10px 0;
    line-height: 1.4;
}
form .phone-number input { width: 30%; }
form .phone-number .hyphen { width: 5%; }
form .person-name label {width: 12%;  }
form .person-name input { width: 38%; }
form .birthday .year { width: 40%; }
form .birthday .month, form .birthday .day { width: 26%; }
form .birthday .month { margin: 0 4% 0; }
form .fieldset.position > select { width: 38%; margin-right: 2%; height: 42px; }
form .fieldset.position > input { width: 60%; height: 42px; }
form .postal-code input { width: 48%; }
form .postal-code .hyphen { width: 4%; }

form .tos-text,
body.contract-plans form .tos-text { margin-bottom: 20px; }
form .tos-text h3 { margin-bottom: 12px; }
form .tos-text p { margin-bottom: 8px; }
form .tos {
    display: block;
    width: 60%;
    margin: 0 auto;
}

form .caption {
    display: block;
    float: right;
    margin-top: 7px;
    line-height: 1.4;
}
form .caption.modal { margin-top: 12px; }
form .error input[type="text"],
form .error input[type="search"],
form .error input[type="tel"],
form .error input[type="url"],
form .error input[type="email"],
form .error input[type="password"],
form .error input[type="datetime"],
form .error input[type="datetime-local"],
form .error input[type="date"],
form .error input[type="month"],
form .error input[type="week"],
form .error input[type="time"],
form .error input[type="number"],
form .error input[type="file"],
form .error select {
    background-color: #fdf7fc;
    border: 1px #cb355c solid;
}
form .alert { display: none;}
form .error .alert {
    display: block;
    color: #f00;
}
*[id^="modal-"] {
    padding: 20px;
}
*[id^="modal-"] h2 {
    margin-bottom: 12px;
}
*[id^="modal-"] p {
    margin-top: 12px;
    line-height: 1.8;
}

#cboxOverlay { background: #000; }
#cboxLoadedContent, #cboxContent { background: #fff; }
#cboxLoadedContent { border: 5px solid transparent; }

body.register-thanks #header nav, body.register-confirm #header nav,
body.register-thanks .jumbotron .text-1, body[class$="-confirm"] .jumbotron .text-1,
body[class$="-confirm"] .caption, body[class$="-confirm"] .tos-text, body[class$="-confirm"] fieldset label,
body[class^="contract-"] #header a[href="https://www.welbox.com/sukoyaka-plus/"] { display: none; }

body.register-form #header,
body.contract-plans #header {
    margin-bottom: 0;
}
body.register-form form .info {
    color: #555;
    padding: 16px;
    border: 1px hsl(204, 70%, 85%) solid;
    background: hsl(204, 70%, 97%);
    margin: 0 0 16px;
}
body.register-form form .info h3 { margin-bottom: 12px; }
body.register-form form .info ul { list-style: disc; margin-left: 20px; text-align: justify; }
body.register-form form .info ul li { line-height: 1.7; margin-bottom: 12px; }
body.register-form form .info ul li:last-child { margin-bottom: 0; }
body.register-form form input[type="submit"] { width: 18em; }

body.register-confirm form .tos label {
    display: block;
    line-height: 1.4;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

body[class$="-thanks"] main > .wrap { width: 740px; }
body[class$="-thanks"] main > .wrap > p { line-height: 1.8; }
body[class$="-thanks"] main > .wrap > p:not(:last-child) { margin-bottom: 40px; }

body.register-confirm form h2 { width: 13em; }
body.contract-thanks form h2 { width: 16em; }
body.contract-thanks main > .wrap > h2 { text-align: center; line-height: 1.6; margin-bottom: 32px; }
body.contract-thanks main > .wrap > ul { list-style: disc; width: 80%; line-height: 1.6; margin: 0 auto 0;  }
body.contract-thanks main > .wrap > ul > li { margin-bottom: 16px; text-align: justify; }
body.contract-thanks .btn {
    width: 80%;
    margin: 70px 0 0;
    line-height: 1.4;
    background-color: hsl(45, 90%, 51%);
    border-bottom-color: hsl(45, 90%, 40%);
}
body.contract-thanks .btn:hover, body.contract-thanks .btn:focus { 
    background-color: hsl(45, 94%, 56%);
    border-color: hsl(45, 94%, 45%);
}

body.contract-plans form h2 { width: 18em; }
body.contract-plans .plans { margin: 0 0 60px; }
body.contract-plans input[type="radio"] + label,
body.contract-plans .detail-info,
body.contract-plans .tos-title,
body.contract-plans .tos-text,
body.contract-plans .tos { 
    width: 90%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
/*body.contract-plans input[type="radio"] + label {
    display: block;
    margin-bottom: 20px;
    padding: 20px;
    padding-left: 60px;
    border: 1px hsl(204, 59%, 80%) solid;
    border-radius: 2px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
body.contract-plans input[type="radio"]:checked + label {
    background-color: hsl(204, 70%, 95%);
}
body.contract-plans input[type="radio"] + label:before {
	top: 37px;
    left: 21px;
    -webkit-box-shadow: 0 0 0 2px hsl(204, 59%, 80%);
    box-shadow: 0 0 0 2px hsl(204, 59%, 80%);
}
body.contract-plans input[type="radio"]:checked + label:before {
    background: hsl(204, 59%, 50%);
}
body.contract-plans input[type="radio"] + label > * { 
    display: block;
    margin-bottom: 12px;
}
body.contract-plans input[type="radio"] + label > *:last-child { margin-bottom: 6px; }
body.contract-plans input[type="radio"] + label > .title { color: hsl(204, 59%, 50%); margin-bottom: 10px; }
body.contract-plans input[type="radio"] + label > .description { margin: 0 0 20px 0; line-height: 1.6; }*/

.tos-title { margin-bottom: 12px !important; }
.tos-text {
    padding: 20px;
    border: 1px hsl(204, 59%, 80%) solid;
    margin-bottom: 20px;
    line-height: 1.4;
    height: 200px;
    overflow: auto;
}
.tos-text:focus {
    -webkit-box-shadow: 0 0 2px 2px hsl(204, 59%, 80%);
    box-shadow: 0 0 2px 2px hsl(204, 59%, 80%);
}
.tos-text > * { margin: 0 0 12px;  }
.tos-text h3 { font-weight: bold; }
.tos-text h4 { margin: 18px 0 6px; }
.tos { margin-bottom: 40px; }

body.contract-form form h3, body.contract-confirm form h3 { margin: 0 0 40px; }
body.contract-form .same-person-checkbox { margin-left: 33%; padding: 0 10px 24px 0; }
body.contract-form .same-person-checkbox label { display: block; line-height: 1.4; margin-bottom: 8px; }
body.contract-form .same-person-checkbox .caption { width: 100%; }
body.contract-form .pl-0, body.contract-confirm .pl-0 { padding-left: 0; }
body.contract-confirm .visible { display: block !important; }

.plan-detail {
	margin: 0 40px 60px;
}
.plan-detail h3 {
	margin-bottom: 30px;
}
.plan-detail h4 {
	margin-bottom: 15px;
	color: hsl(204, 59%, 50%);
	font-weight: bold;
}
.plan-detail table {
	margin-bottom: 10px;
	line-height: 1.6;
	font-size: 87.5%;
	border-top: 1px #ccc solid;
}
.plan-detail th {
	width: 40%;
	padding: 10px 5px;
	border-bottom: 1px #ccc solid;
}
.plan-detail td {
	padding: 10px 5px;
	border-bottom: 1px #ccc solid;
}
.plan-detail .mb40 {
	margin-bottom: 40px;
}

/* contact area */
*[id^="modal-"] .contact-area p {
    margin-top: 0;
    line-height: 1.4;
}
.contact-area h4 {
	margin-bottom: 30px;
	padding: 20px 0;
	font-size: 112.5%;
	text-align: center;
	border-top: 1px #e1e1e1 solid;
	border-bottom: 1px #e1e1e1 solid;
}
.contact-area h5 {
	margin-bottom: 20px;
	color: #1072ba;
	text-align: center;
	font-size: 125%;
	line-height: 53px;
}
.contact-area h5 img {
	margin-right: 10px;
	height: 50px;
}
.contact-area li {
	float: left;
	width: 49%;
}
.contact-area li + li { float: right;}
.contact-area .box {
	position: relative;
	display: block;
	padding: 15px 15px 15px 90px;
	text-decoration: none;
	border: 1px #1072ba solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: 70px;
}
.contact-area span.box { background-image: url(../../imgs/contact-tel.gif);}
.contact-area a.box { background-image: url(../../imgs/contact-mail.gif);}
.contact-area a.box:hover { background-color: #fafafa;}
.contact-area .tel,
.contact-area .mail {
	color: #1072ba;
	font-size: 26px;
	font-weight: bold;
}
.contact-area .mail {
	font-size: 18px;
	line-height: 50px !important;
}

/* list plan */
.form-area { margin-bottom: 50px;}
.form-area input[type="radio"] + label:before {
	-webkit-box-shadow: 0 0 0 1px #3590cb;
	-moz-box-shadow: 0 0 0 1px #3590cb;
	box-shadow: 0 0 0 1px #3590cb;
}
.form-area input[type="radio"]:checked + label:before { background: #3590cb;}
.form-area input[type="checkbox"]:checked + label:before {
	border-bottom: 3px #3590cb solid;
	border-right: 3px #3590cb solid;
}
.mb20 { margin-bottom: 20px;}
.list-plan th,
.list-plan td {
	padding: 13px;
	border: 1px #ccc solid;
}
.list-plan th {
	font-size: 14px;
	line-height: 1.4;
}
.list-plan .no-line th {
	padding: 20px;
	text-align: center;
	border: none;
}
.list-plan td {
	text-align: center;
	vertical-align: middle;
}
.list-plan .bg-std {
	width: 28%;
	background: #f5fcff;
}
.list-plan .bg-wbox {
	width: 32%;
	background: #d1efff;
}
.choice td {
	padding: 0;
	background: #d1efff;
	line-height: 1;
}
.choice .radio-btn {
	float: left;
	box-sizing: border-box;
}
.choice .radio-btn.bg-std {
	width: 46.606334841628959276018099547511%;
}
.choice .radio-btn.bg-wbox {
	width: 53.393665158371040723981900452489%;
	border-left: 1px #ccc solid;
}
.choice .radio-btn input[type="radio"] {
	position:fixed;
}
.choice .radio-btn input[type="radio"] + label {
	width: 100%;
	margin: 0;
	z-index: 5;
	padding: 20px 0 48px 0;
}
.choice .radio-btn input[type="radio"] + label:before {
	bottom: 16px;
}
.choice .radio-btn input[type="radio"]:focus + label {
    -webkit-box-shadow: 0 0 2px 2px hsl(204, 70%, 80%) inset;
    box-shadow: 0 0 2px 2px hsl(204, 70%, 80%) inset;
}
.list-plan .subjects {
	padding: 9px 13px;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	font-weight: bold;
	background: rgb(0,103,176);
	background: -moz-linear-gradient(-45deg, rgba(0,103,176,1) 0%, rgba(0,185,219,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(0,103,176,1) 0%, rgba(0,185,219,1) 100%);
	background: linear-gradient(135deg, rgba(0,103,176,1) 0%, rgba(0,185,219,1) 100%);
}

.list-plan .relative {
	display: inline-block;
	position: relative;
	padding-right: 24px;
}
.list-plan .relative a {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -10px;
	color: rgba(0,185,219,1);
}
.list-plan .choice th {
	padding: 19px;
	font-size: 26px;
	font-weight: bold;
	text-align: right;
	border: none;
}
.choice input[type="radio"] + label {
	display: block;
	padding: 0 0 35px 0;
	line-height: 1.4;
	font-weight: bold;
}
.choice input[type="radio"] + label:before {
	top: auto;
	bottom: 3px;
	left: 50%;
	margin: 0 0 0 -14px;
	width: 16px;
	height: 16px;
	border: 4px #f3f3f3 solid;
}
.ribbon_box3{
    display: block;
    position: relative;
    margin: 15px auto;
    padding: 10px 0;
    width: 300px;
    height: 150px;
    background: #f1f1f1;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}
.ribbon_area {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 89px;
    height: 91px;
    overflow: hidden;
    z-index: 100;
  }
.ribbon14 {
    display: inline-block;
    position: absolute;
    padding: 7px 0;
    left: -23px;
    top: 22px;
    width: 160px;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    background: #ffa520;
    color: #fff;
    letter-spacing: 0.05em;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.ribbon14:before,.ribbon14:after{
    position: absolute;
    content: "";
    border-top: 4px solid #b2751b;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    bottom: -4px;
}
.ribbon14:before{ left: 14px;}
.ribbon14:after { right: 18px;}

[data-toggle="tooltip"] {
    cursor: pointer;
}
.popper,
.tooltip {
    position: absolute;
    background: #ffa520;
    color: white;
    min-width: 150px;
    max-width: 300px;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
    padding: 10px 15px;
    text-align: left;
    z-index: 100;
    word-wrap : break-word;
    overflow-wrap : break-word;
    line-break: strict;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
}
.tooltip .tooltip-arrow,
.popper .popper__arrow {
    border-color: #ffa520;
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
    margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
    margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
    margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

/* welbox area */
#welbox-area.wrap {
	width: 820px;
}
#welbox-area strong {
	color: #3590cb;
}
#welbox-area h2 {
    position: relative;
    display: block;
    width: 13em;
    margin: 0 auto 30px;
    padding: 20px 0;
    background: #3590cb;
    color: #fff;
    border-radius: 99px;
}
#welbox-area h2:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px transparent solid;
    border-top-color: #3590cb;
}
#welbox-area .intro {
	margin: 0 auto 30px;
	text-align: center;
}
#welbox-area .intro h3 {
	margin-bottom: 10px;
	color: #3590cb;
	font-size: 125%;
	font-weight: bold;
	line-height: 1.6;
}
#welbox-area .intro h3 sup {
	font-size: 60%;
	vertical-align: top;
	position: relative;
	top: 0;
}
#welbox-area .intro p {
	display: inline-block;
	font-size: 87.5%;
	text-align: left;
}
#welbox-area h4 {
	margin-bottom: 30px;
	padding: 15px;
	color: #fff;
	font-size: 125%;
    background: #3590cb;
}
#welbox-area .about  {
	margin: 0 auto 50px;
	padding: 30px 30px 30px 320px;
	width: 760px;
	line-height: 1.6;
	border: 1px #093f9a solid;
	background: url(../images/welbox-logo.png) no-repeat 30px 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#welbox-area .complain {
	display: block;
	margin: 0 auto;
	text-align: center;
}
#welbox-area .complain h3 {
	margin-bottom: 20px;
	font-size: 125%;
}
#welbox-area .complain ul {
	display: inline-block;
	margin-bottom: 30px;
}
#welbox-area .complain li {
	padding: 3px 0;
	font-size: 112.5%;
	text-align: left;
}
#welbox-area .complain .fa-check-square {
	padding-right: 5px;
	color: #3590cb;
}
#welbox-area .point {
	margin: 10px 0 50px;
	padding: 30px;
	font-size: 125%;
	line-height: 1.6;
	text-align: center;
	border: 2px #f8ad0b solid;
	background: #fffcf4;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#welbox-area .net-site,
#welbox-area .stay {
	margin-bottom: 40px;
}
#welbox-area .net-site h5,
#welbox-area .stay h5 {
	margin: 0 auto 30px;
	text-align: center;
	color: #3590cb;
	font-size: 22px;
}
#welbox-area .net-site h5 span,
#welbox-area .stay h5 span {
	padding-bottom: 5px;
	border-bottom: 1px #3590cb solid;
}
#welbox-area .stay h6 {
	float: left;
	padding: 0 30px;
}
#welbox-area .stay .text {
	clear: both;
	margin-bottom: 20px;
	padding: 20px 0 0 0;
}
#welbox-area .stay-list + .text {
	margin-top: 40px;
}
#welbox-area .merit {
	display: block;
	margin: 0 auto;
	text-align: center;
}
#welbox-area .merit ul {
	display: inline-block;
	margin-bottom: 30px;
}
#welbox-area .merit li {
	padding: 3px 0;
	font-size: 112.5%;
	text-align: left;
}
#welbox-area .merit .indent {
	margin-left: 1em;
	font-size: 77.8%;
}
#welbox-area .net-site .sugotoku-list {
	margin: 0 auto 20px;
	width: 600px;
}
#welbox-area .example {
	margin-bottom: 40px;
}
#welbox-area .example h5 {
	margin-bottom: 30px;
}
#welbox-area .example-list li {
	position: relative;
	float: left;
	padding: 10px;
	width: 23%;
	min-height: 311px;
	text-align: center;
	border: 1px #3590cb solid;	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#welbox-area .example-list li + li { margin-left: 2.6%;}

#welbox-area .sugotoku h5 {
	margin-bottom: 20px;
	font-weight: bold;
}
#welbox-area .sugotoku-list { margin-top: 30px;}
#welbox-area .sugotoku-list li,
#welbox-area .stay-list li {
	position: relative;
	float: left;
	width: 32%;
	text-align: center;
}
#welbox-area .sugotoku-list li + li,
#welbox-area .stay-list li + li { margin-left: 2%;}
#welbox-area .img { margin-bottom: 10px;}
#welbox-area .name {
	margin-bottom: 10px;
	color: #3590cb;
	font-weight: bold;
}
#welbox-area .waku {
	margin-bottom: 10px;
	padding: 5px;
	line-height: 1;
	border: 1px #ccc solid;
}
#welbox-area .sugotoku-list .price {
	margin-bottom: 5px;
	font-size: 14px;
}
#welbox-area .sugotoku-list .arrow { font-size: 22px;}
#welbox-area .sugotoku-list .discount {
	color: #70c7ff;
	font-size: 28px;
	font-weight: bold;
}
.ribbon17 {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 5px;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 0;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: white;
    background: #70c7ff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.ribbon17:before {
    position: absolute;
    content: '';
    top: 0;
    left: -7px;
    border: none;
    height: 38px;
    width: 7px;
    background: #70c7ff;
    border-radius: 5px 0 0 5px;
}
.ribbon17:after {
    position: absolute;
    content: '';
    bottom: -7px;
    left: -5px;
    border: none;
    height: 7px;
    width: 5px;
    background: #4d99ca;
    border-radius: 5px 0 0 5px;
}