@charset "utf-8";

/*===============================================
 *	Common
===============================================*/
.bg-relics{background: url("../img/memorial/photo-memorial_men.png") left bottom no-repeat;background-size: 236px;max-width: 810px;margin: 0 auto;}
.relics-box {max-width: 580px;margin-left: auto;padding: 6em 0 1em;}
.ttl-relics{font-size: 36px;font-weight: bold;text-shadow: 2px 2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, -2px -2px 0px #fff, 2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff;margin-bottom: .5em;line-height: 1.4;}
.ttl-main_relics{font-size: 34px;font-weight: bold;text-shadow: 2px 2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, -2px -2px 0px #fff, 2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff;line-height: 1.4;}
.ttl-main_relics span{font-size: 44px;}
.basic-greenbox{border: #009db3 2px solid;}
.basic-greenbox {background: url(../img/bg-note.png) bottom left repeat #fff;border: #009db3 6px solid;}
.greenbox-normal_ttl {background: #009db3;padding: 10px 0;}
.band-ttl, .band-fl_ttl {font-size: 26px;line-height: 1.3;}
@media only screen and (max-width: 768px) {
.bg-relics {background-size: 172px;}
.relics-box {max-width: 580px;}
.ttl-main_relics{font-size: 28px;}
.ttl-main_relics span{font-size: 34px;}
}
@media only screen and (max-width: 568px) {
.bg-relics {background: url("../img/memorial/photo-memorial_men.png") 2em bottom no-repeat;background-size: 102px;}
.relics-box {max-width: 275px;padding: 1.5em 0;}
.ttl-main_relics {font-size: 18px;}
.ttl-main_relics span {font-size: 20px;}
.band-ttl, .band-fl_ttl {font-size: 20px;}
.greenbox-normal_ttl {padding: 5px 0 10px;}
}
/*===============================================
 *	pink-box
===============================================*/
.pink-box {background: url("../img/departure/bg-note.png") left repeat #fff;border: #ec7589 4px solid;outline: #ffdae0 12px solid;outline-offset: -16px;position: relative;padding: 35px;max-width: 910px;margin: 0 auto;}
.pink-box h2{border-left: #ec7589 7px solid;padding-left: .5em;font-size: 26px;font-weight: bold;margin-bottom: 20px;}
.pink-box p span{font-weight: bold;}
.pink-box img{max-width: 865px;margin: 0 auto;}
img.arrow-memorial{max-width: 753px;margin: 0 auto 60px;}
@media only screen and (max-width: 768px) {
.pink-box {border: #ec7589 2px solid;outline: #ffdae0 8px solid;outline-offset: -12px;padding: 25px;margin: 0 4%;}
.pink-box h2 {font-size: 22px;}
img.arrow-memorial {max-width: 550px;margin: 0 auto 60px;}
}
@media only screen and (max-width: 568px) {
.pink-box h2 {border-left: #ec7589 5px solid;font-size: 19px;}
.pink-box p{margin-bottom: 1em;}
img.arrow-memorial {max-width: initial;margin: 0 auto 30px;width: 90%;}
}
@media only screen and (max-width: 375px) {
img.arrow-memorial {max-width: 320px;}
}
@media only screen and (max-width: 320px) {
.pink-box h2 {font-size: 16px;}
}
/*===============================================
 *	memorial-point
===============================================*/
#memorial-point_wrap{position: relative;}
#memorial-point_wrap .arrow-bottom{max-width: 660px;position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);}
.icon-point{width: 66px;}
.point-contents{background: #fff;border: #39a8c4 10px solid;padding: 30px;position: relative;z-index: 5;margin: 0 0 3em 0;}
.point-fl{display: flex;justify-content: space-between;flex-wrap: wrap;}
.point-fl img{width: 35%;}
.point-txtbox{display: flex;align-items: flex-start;justify-content: space-between;flex-direction:row-reverse;flex-wrap: wrap;}
.point-txt{width: 60%;order: 1;}
.point-txt em{}
.point-txtbox img{width: 35%;}
.mag30{margin: 0 0 30px 0;}
@media only screen and (max-width: 768px) {
.point-contents {padding: 15px;border: #39a8c4 5px solid;}
}
@media only screen and (max-width: 568px) {
.icon-point {width: 40px;}
.point-txt{width: 100%;order: 0;}
.point-fl{display: block;}
.point-fl img{width: 100%;margin: 0 0 20px 0;}
.point-txtbox img{width: 100%;margin: 0 0 20px 0;}
.point-txtbox {width: 100%;}
}

/*===============================================
 *	Definition
===============================================*/
.ttl-definition_full{border-left: #39a8c4 5px solid;font-size: 20px;font-weight: bold;padding-left: 3px;margin: 0 0 15px 0;text-shadow: 1px 1px 0 #fff;}
.ttl-definition_full:first-letter {color: #39a8c4;font-size: 28px;}
.ttl-definition_full span{display: block;border-left: #39a8c4 3px solid;border-bottom: #39a8c4 3px solid;padding-left: 10px;}
.point-contents .ttl-definition_full{position: relative;}
.ttl-definition_full span.position-price{position: absolute;border-left: none;border-bottom: none;right: 0;top: 0px;background: #eb4b66;padding: 5px 1em;color: #fff;text-shadow: none;}
.ttl-definition_full span.position-price .tax{border-left: none;border-bottom: none;display: inline;padding: 0;}
.ttl-definition_full span.position-price {position: absolute;color: #fff;background: #eb4b66;font-weight: bold;}
.ttl-definition_full span.position-price::before,
.ttl-definition_full span.position-price::after {position: absolute;left: -10px;width: 50%;height: 50%;background: #eb4b66;content: '';z-index: -1;}
.ttl-definition_full span.position-price::before {top: 0;transform: skew(-45deg);}
.ttl-definition_full span.position-price::after {top: 50%;transform: skew(45deg);}

@media only screen and (max-width: 568px) {
.ttl-definition_full {font-size: 15px;width: 94%;line-height: 1.2;}
.ttl-definition_full:first-letter {font-size: 20px;}
.ttl-definition_full span.position-price {top: -5px;padding: 5px 5px 5px 0;}
.ttl-definition_full span.position-price .tax{font-size: 11px;}
.ttl-definition_full span.position-price::before,
.ttl-definition_full span.position-price::after {left: -8px;}
}
@media only screen and (max-width: 320px) {
.ttl-definition_full {font-size: 15px;width: 90%;}
.ttl-definition_full:first-letter {font-size: 18px;}
}
/*-----------------------------------------------
 *	flow-memorial
-----------------------------------------------*/
.catch-memorial{max-width: 900px;margin: 0 auto 40px;}
.flow-memorial {display: flex;flex-wrap: wrap;justify-content:center;gap:60px;}
.flow-memorial > li {background: #fff;border: 3px solid #009db3;box-sizing: border-box; width: 29.2%;position: relative;}
.flow-memorial > li .icon {display: block;text-align: center;color: #fff;background: #009db3;padding: 5px 0;}
.flow-memorial > li img {margin: 0 0 1em 0;}
.flow-memorial > li dd {padding: 0 20px 30px;}
.flow-memorial > li:nth-child(2)::before {content: "";width: 14px;height: 14px;margin-right: 10px;display: block;border-top: 4px solid #009db3;border-right: 4px solid #009db3;position: absolute;top: calc(50% - 14px);left: -45px;transform: rotate(45deg);}
.flow-memorial > li:nth-child(2)::after {content: "";width: 14px;height: 14px;margin-right: 10px;display: block;border-top: 4px solid #009db3;border-right: 4px solid #009db3;position: absolute;top: calc(50% - 14px);right: -45px;transform: rotate(45deg);}
.flow-memorial > li dl dt {font-size: 1.3em;font-weight: 600;color: #009db3;margin-bottom: 10px;text-align: center;}
.flow-memorial > li dl dd {margin-left: 0;}
@media only screen and (max-width: 768px) {
.flow-memorial {gap: 32px;}
.flow-memorial > li {width: 30%;max-width: unset;display: block;}
.flow-memorial > li dd {padding: 0 15px 15px;}
.flow-memorial > li:nth-child(2)::before {left: -32px;}
.flow-memorial > li:nth-child(2)::after {right: -32px;}
}
@media only screen and (max-width: 568px) {
.flow-memorial > li {margin: 0 0 30px 0;width: 100%;}
.flow-memorial > li:last-child {margin: 0;}
.flow-memorial > li:nth-child(2)::before {left: 50%;top: -50px;transform: translateX(-50%) rotate(135deg);}
.flow-memorial > li:nth-child(2)::after {left: 50%;bottom:-40px;top: auto;transform: translateX(-50%) rotate(135deg);}
}
/*-----------------------------------------------
 *	caution
-----------------------------------------------*/
.caution-wrap{align-items: flex-start;background: #fcfaee;border: #f7efcb 2px solid;display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 4%;font-size: 18px;}
img.icon-caution{max-width: 100px;margin: 0 auto 10px;display: block;}
@media only screen and (max-width: 768px) {
.caution-wrap {font-size: 16px;}
img.icon-caution {max-width: 60px;}
}
@media only screen and (max-width: 568px) {
.caution-wrap {font-size: 13px;}
img.icon-caution {max-width: 30px;margin: 0 auto 10px;}
}