@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");


.cont_area {
font-size: 16px;
font-size: 1.6rem;
line-height: 1.7;
color: #222;
font-family: "Noto Sans JP", sans-serif;
}

.cont_area a {
text-decoration: none;
display: inline-block;
}
.cont_area a:hover, .cont_area a:active {
text-decoration: none;
}

.secInner {
width: 100%;
max-width: 950px;
margin: 0 auto;
}

.pc {
display: block !important;
}

.sp {
display: none !important;
}

@media only screen and (max-width: 1024px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
}
.txtC {
text-align: center !important;
}

.txtR {
text-align: right !important;
}

.txtL {
text-align: left !important;
}

.bold {
font-weight: bold !important;
}

.normal {
font-weight: normal !important;
}

.mgnB5 {
margin-bottom: 5px;
}

.mgnB10 {
margin-bottom: 10px;
}

.mgnB15 {
margin-bottom: 15px;
}

.mgnB20 {
margin-bottom: 20px;
}

.mgnB30 {
margin-bottom: 30px;
}

.mgnB40 {
margin-bottom: 40px;
}

.cont_area a[href^="tel:"] {
cursor: default;
}

.title-box {
display: none;
}



.mv img {
width: 100%;
display: block;
}

.js-c-lightbox-content {
background: rgba(255, 255, 255, 0.85);
padding: 20PX;
}
.js-c-lightbox-content h3 {
margin-bottom: 10px;
border-bottom: 1px solid #d0d0d0;
font-size: 1.6rem;
font-weight: bold;
font-family: "Zen Kaku Gothic New", sans-serif;
position: relative;
padding-left: 15px;
padding-bottom: 10px;
}
.js-c-lightbox-content h3::before {
content: "";
width: 5px;
height: 24px;
background-color: #3579B6;
position: absolute;
top: 3px;
left: 0px;
}
.js-c-lightbox-content dl {
display: flex;
align-items: center;
background-color: #fff;
border: 1px solid #d0d0d0;
margin-bottom: 15px;
}
.js-c-lightbox-content dl dt {
width: 30%;
text-align: center;
font-weight: bold;
font-size: 1.6rem;
padding: 10px 0;
border-right: 1px solid #d0d0d0;
}
.js-c-lightbox-content dl dd {
width: 70%;
font-size: 1.4rem;
padding: 10px 10px 10px 30px;
}

.main {
background: #3579B6;
padding: 80px 0 100px 0;
position: relative;
overflow: hidden;
}
.main .main__bgTop {
position: absolute;
width: 100%;
}
.main .main__bgTop img {
display: block;
}
.main .main__bgBtm {
position: absolute;
bottom: 0;
width: 100%;
}
.main .main__bgBtm img {
display: block;
}
.main .main__lead {
position: relative;
}
.main .main__lead .redCaution {
margin: 0 auto 30px;
}
.main .main__lead .redCaution span {
color: #cc0000;
border: #cc0000 2px solid;
padding: 15px 10px;
font-size: 2.4rem;
font-weight: bold;
background: #fff;
text-align: center;
width: 100%;
max-width: 1030px;
display: inline-block;
}
.main .main__lead p {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
font-size: 2rem;
color: #fff;
margin-bottom: 60px;
}
.main .main__lead .border {
border-bottom: 5px solid #FFF100;
font-size: 3rem;
display: inline-block;
margin-bottom: 15px;
font-weight: bold;
}
.main .main__lead .main__borderBox {
margin: 0 auto;
margin-bottom: 60px;
font-family: "Zen Kaku Gothic New", sans-serif;
color: #fff;
font-weight: bold;
font-size: 2.2rem;
border: 1px solid #fff;
width: 100%;
max-width: 500px;
padding: 20px 0;
}
.main .main__lead .main__YellowBox {
margin: 0 auto;
margin-bottom: 60px;
font-family: "Zen Kaku Gothic New", sans-serif;
color: #222;
font-weight: 500;
font-size: 3rem;
background: #FFF100;
width: 100%;
max-width: 1030px;
padding: 15px 0;
text-align: center;
}
.main .main__hotel {
background: #fff;
padding: 100px 40px 20px 40px;
position: relative;
width: 1030px;
margin: 0 auto;
overflow: hidden;
}
.main .main__hotel::before {
content: "";
display: block;
width: 100px;
height: 100px;
background-color: #FFF100;
position: absolute;
top: -50px;
left: -50px;
transform: rotate(45deg);
}
.main .main__hotel h3 {
font-family: "Zen Kaku Gothic New", sans-serif;
position: relative;
margin-bottom: 40px;
font-size: 2rem;
}
.main .main__hotel h3::before {
content: "";
width: 208px;
height: 90px;
background: url(/domtour/jaldp/oka/ishigaki_triathlon/img/ico_hotelTtl.svg) no-repeat;
background-size: contain;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.main .main__hotel .main__hotelList {
display: flex;
flex-wrap: wrap;
}
.main .main__hotel .main__hotelList li {
border: 1px solid #ddd;
padding: 20px;
width: 31%;
margin: 0 10px;
margin-bottom: 40px;
display: flex;
flex-direction: column;
}
.main .main__hotel .main__hotelList li img {
width: 100%;
display: block;
margin-bottom: 20px;
}
.main .main__hotel .main__hotelList li h4 {
font-size: 1.5rem;
font-weight: 500;
font-family: "Zen Kaku Gothic New", sans-serif;
position: relative;
padding-left: 13px;
}
.main .main__hotel .main__hotelList li h4::before {
content: "";
width: 5px;
height: 24px;
background-color: #3579B6;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
}
.main .main__hotel .main__hotelList li .hotelBtn {
margin-top: auto;
}
.main .main__hotel .main__hotelList li .hotelBtn a {
border: 1px solid #ddd;
text-align: center;
font-weight: bold;
font-size: 1.4rem;
display: block;
padding: 12px;
position: relative;
transition: all 0.3s;
}
.main .main__hotel .main__hotelList li .hotelBtn a::after {
content: "";
background: url(/domtour/jaldp/oka/ishigaki_triathlon/img/ico_ext.svg) no-repeat;
width: 17px;
height: 15px;
background-size: contain;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
}
.main .main__hotel .main__hotelList li .hotelBtn a:hover {
opacity: 0.6;
}

.caution {
margin-bottom: 120px;
}
.caution h3 {
font-size: 1.8rem;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-bottom: 20px;
padding-left: 13px;
position: relative;
}
.caution h3::before {
content: "";
width: 5px;
height: 24px;
background-color: #3579B6;
position: absolute;
top: 3px;
left: 0px;
}
.caution p {
margin-bottom: 60px;
}
.caution p span {
color: #BF3D36;
}
.caution .caution__list {
border: 1px solid #ddd;
padding: 40px;
}
.caution .caution__list h3 {
border-bottom: none;
padding: 0;
margin-bottom: 10px;
}
.caution .caution__list h3::before {
display: none;
}

.module {
position: relative;
}
.module .redCaution {
position: absolute;
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 3;
color: #cc0000;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.module .redCaution span {
border: #cc0000 2px solid;
padding: 10px;
font-size: 2rem;
background: #fff;
width: 70%;
text-align: center;
}

/*-----更新231024-----*/
.main__img{
max-width: 900px;
margin: 0 auto 60px;
font-size: 1.6rem!important;
}
.main__img img{
width: 100%;
}


/* チェックボックステスト作成 */
.red{
color: #cc0000;
}

.box_attention {
border: 2px solid #cc0000;
padding: 18px;
margin: 50px auto 20px;
}

@media all and (min-width: 740px) {
.box_attention {
margin-top: 60px;
}
}

@media all and (max-width: 739px) {
.box_attention {
margin-top: 40px;
margin-left: 10px;
margin-right: 10px;
}
}

.optinBox span.optInCheck {
position: relative;
display: inline-block;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

@media all and (min-width: 740px) {
.optinBox span.optInCheck {
width: 20px;
height: 20px;
}
}

@media all and (max-width: 739px) {
.optinBox span.optInCheck {
width: 18px;
height: 18px;
}
}

.optinBox span.optInCheck::before {
background: #fff;
border: 2px solid #cc0000;
content: "";
display: block;
height: 20px;
width: 20px;
position: absolute;
top: 0;
left: 0;
}

.optinBox span.optInCheck::after {
border-right: 3px solid #333333;
border-bottom: 3px solid #333333;
content: "";
display: block;
position: absolute;
top: 50%;
opacity: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

@media all and (min-width: 740px) {
.optinBox span.optInCheck::after {
width: 8px;
height: 12px;
left: 6px;
margin-top: -8px;
}
}

@media all and (max-width: 739px) {
.optinBox span.optInCheck::after {
width: 8px;
height: 13px;
left: 5px;
margin-top: -9px;
}
}

.optinBox input[type="checkbox"] {
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
}

.optinBox label {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
cursor: pointer;
position: relative;
width: auto;
}

@media all and (min-width: 740px) {
.optinBox label {
padding: 5px 0;
}
}

@media all and (max-width: 739px) {
.optinBox label {
padding: 5px 10px;
}
}

input[type="checkbox"]:focus + span.optInCheck {
box-shadow: 0 0 3px 3px #ccc;
}

input[type="checkbox"]:checked + span.optInCheck:after {
opacity: 1;
}

.optinBox span.agreeTxt {
display: inline-block;
margin-left: 15px;
font-size: 18px;
font-weight: bold;
vertical-align: -2px;
}

.areaLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

@media all and (min-width: 740px) {
.areaLink {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -15px 0 0 -15px;
padding-top: 15px;
}
}

@media all and (max-width: 739px) {
.areaLink {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}

.areaLink .areaItem {
position: relative;
}

@media all and (min-width: 740px) {
.areaLink .areaItem {
width: 178px;
margin: 15px 0 0 15px;
}
}

@media all and (max-width: 739px) {
.areaLink .areaItem {
width: 100%;
margin-top: 15px;
}
}

.areaLink.inActive .areaItem:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
}

.hoverEff img {
transition: all ease 0.2s;
}

.hoverEff:hover img {
opacity: 0.7;
}

@media all and (min-width: 740px) {
.mgl10-pc {
margin: 10px !important;
}
}

.linkbtn{
display: flex;
gap: 20px;
}
.box_attention h3{
font-weight: bold;
margin-bottom: 10px;
font-size: 2rem;
}

.box_attention ul.disc li::before{
content: "・";
}
.box_attention ul.attention li::before{
content: "※";
}
.box_attention ul.num{
list-style: auto;
}
.box_attention ul li,
.box_attention ol li{
text-indent: -13px;
padding-left: 13px;
}
.caution {
margin-bottom: 80px;
}

.kiyakuBox{
background: #fff4f4;
padding: 20px;
font-size: 1.6rem;
}
.kiyakuBox h4{
font-size: 2rem;
}
.main__bgTop img{
width: 100%;
}
.main__bgBtm img{
width: 100%;
}
.main .main__hotel .main__hotelList {
display: flex;
justify-content: center;
}
.main .main__hotel .main__hotelList li {
width: 40%;
}
.btm_caution .caution__list{
border: 2px solid #ddd;
padding: 18px;
}
.btm_caution .caution__list h3{
font-size: 2rem;
}

.new_accordion.type_normal .content img{
width: 100%;
}


.main__img img{
padding-bottom: 20px;
}
.main__imgBox {
margin: 0 auto;
font-family: "Zen Kaku Gothic New", sans-serif;
color: #222;
font-weight: 500;
font-size: 2rem;
background: #FFF100;
width: 100%;
max-width: 1030px;
padding: 10px 0;
text-align: center;
line-height: 2;
display: inline-block;
}
.main__imgBox a{
text-decoration: underline;
}
.main__imgBox a:hover{
opacity: .8;
}
.btm_caution .caution__list h3 .border{
border-bottom: 5px solid #FFF100;
}
/*--終了対応 --*/
.shuryo{
	width:800px;
	padding:50px;
	color:#cc0000;
	text-align:center;
	border:1px solid #CC0000;
	font-size:26px;
	margin:50px auto;
}
