body {
color: #333;
background: #f7f9f9;
font-family: "M PLUS Rounded 1c", "Lato", "貂ｸ繧ｴ繧ｷ繝�け Medium", "貂ｸ繧ｴ繧ｷ繝�け菴�", "Yu Gothic Medium", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ ProN", "Hiragino Kaku Gothic ProN", "繝｡繧､繝ｪ繧ｪ", Meiryo, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
font-size: 1.6rem;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
font-weight: 400;
position: relative;
letter-spacing: 0.1em;
background-repeat: repeat;
background-position: center
}

a {
color: #028fcd;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer
}

#wrapper {
overflow: hidden
}

img {
max-width: 100%;
height: auto
}

.bold {
font-weight: 600
}

h2,
h3 {
line-height: 1.4
}

.mincho {
font-family: "Nanum Gothic", "貂ｸ譏取悃 Medium", "Yu Mincho", "YakuHanMP", YuMincho, "Hiragino Mincho ProN", HGS譏取悃E, serif;
font-weight: 500
}

.border-line {
display: block;
border-top: 2px dashed #104790;
margin: 35px 0
}

@keyframes view-zoomin {
0% {
opacity: 0;
transform: scale(0.95)
}

100% {
opacity: 1;
transform: scale(1)
}
}

@keyframes view-slideup {
0% {
opacity: 0;
transform: translate(0, 35px)
}

100% {
opacity: 1;
transform: translate(0, 0)
}
}

.animation {
opacity: 0
}

.slideup.on {
opacity: 1;
animation: view-slideup 0.65s cubic-bezier(0.2, 1, 0.2, 1)
}

.zoomin.on {
opacity: 1;
animation: view-zoomin 0.65s cubic-bezier(0.2, 1, 0.2, 1)
}

.loader {
align-items: center;
background: #fdfdfd;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999
}

.loader::after {
animation: loader 0.5s linear infinite;
border: 1px solid #02A1E6;
border-radius: 50%;
border-right: 1px solid rgba(2, 161, 230, 0.2);
border-top: 1px solid rgba(2, 161, 230, 0.2);
content: "";
height: 70px;
width: 70px
}

.loader.off {
display: none
}

@keyframes loader {
0% {
transform: rotate(0)
}

100% {
transform: rotate(360deg)
}
}

@keyframes hd-scrolled {
0% {
opacity: 0;
transform: translate(0, -100%)
}

100% {
opacity: 1;
transform: translate(0, 0)
}
}

header {
position: relative;
background-color: #fff
}

#l-header {
z-index: 200;
margin: 0 auto;
text-align: center;
width: 100%;
max-width: 1200px;
padding: 15px 20px 0;
position: relative;
height: 190px
}

@media all and (max-width: 1100px) {
#l-header {
min-width: initial;
height: 160px
}
}

@media all and (max-width: 896px) {
#l-header {
height: 135px
}
}

#l-header.is-fixed {
max-width: 100%;
position: fixed;
background-color: #fff;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
margin: 0 auto;
border-radius: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-height: 100px
}

@media all and (max-width: 1100px) {
#l-header.is-fixed {
max-height: 90px
}
}

#l-header.is-fixed:after {
display: none
}

#l-header.is-fixed .head-right {
margin: 10px auto
}

@media all and (max-width: 1100px) {
#l-header.is-fixed .head-right {
margin-right: 0
}
}

#l-header.is-fixed .head-right_lower {
margin-top: 10px
}

#l-header.is-fixed #header_nav {
transition: 0.8s
}

@media all and (max-width: 1100px) {
#l-header.is-fixed #header_nav ul li {
width: auto;
margin-left: 15px
}
}

#l-header.is-fixed #header_nav a {
padding-top: 0
}

@media all and (max-width: 1100px) {
#l-header.is-fixed #header_nav a {
font-size: 1.2rem
}
}

#l-header.is-fixed #header_nav a.nav01::before,
#l-header.is-fixed #header_nav a.nav02::before,
#l-header.is-fixed #header_nav a.nav03::before,
#l-header.is-fixed #header_nav a.nav04::before,
#l-header.is-fixed #header_nav a.nav05::before,
#l-header.is-fixed #header_nav a.nav06::before {
background: none;
transition: 0.8s
}

#l-header.is-fixed #header_nav a:hover:after,
#l-header.is-fixed #header_nav a.active:after {
width: 20px
}

#l-header.is-fixed .inner {
transition: 0.8s;
position: relative;
padding-top: 10px
}

@media all and (max-width: 1100px) {
#l-header.is-fixed .inner {
padding: 0 20px
}
}

#l-header.is-fixed .inner #logo {
width: 300px;
position: relative
}

@media all and (max-width: 1100px) {
#l-header.is-fixed .inner #logo {
margin-top: 20px;
margin-bottom: 0;
width: 200px
}
}

#l-header.is-fixed .inner #logo .logo2 {
display: none
}

#l-header.is-fixed .inner #logo .logo1 {
display: block
}

#l-header .inner {
display: flex;
flex-wrap: wrap;
max-width: 100%;
min-width: 1000px;
margin: 0 auto;
align-items: center;
justify-content: space-between;
position: relative
}

@media all and (max-width: 1100px) {
#l-header .inner {
padding-top: 0px;
min-width: 800px
}
}

@media all and (max-width: 896px) {
#l-header .inner {
min-width: initial
}
}

#l-header .inner #logo {
width: 300px;
transition: all 0.2s ease-in;
display: block;
margin: 0 auto;
z-index: 20
}

@media all and (max-width: 896px) {
#l-header .inner #logo {
top: 0;
margin-bottom: 0
}
}

@media all and (max-width: 639px) {
#l-header .inner #logo {
margin-left: 0
}
}

#l-header .inner #logo .logo2 {
display: none
}

#l-header .inner #logo .logo1 {
display: block
}

#l-header .head-right {
margin: 0px auto
}

@media all and (max-width: 1100px) {
#l-header .head-right {
margin-right: 0
}
}

@media all and (max-width: 896px) {
#l-header .head-right {
display: none
}
}

#l-header .head-right_contact {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: auto
}

@media all and (max-width: 1100px) {
#l-header .head-right_contact {
margin-right: auto;
justify-content: center
}
}

#l-header .head-right_contact>p:not(:last-of-type) {
margin-right: 10px
}

#l-header .head-right_contact .head-sns {
display: flex;
flex-wrap: wrap
}

#l-header .head-right_contact .head-sns .head-sns-txt {
font-size: 1.4rem;
font-weight: bold;
margin-left: 20px
}

#l-header .head-right_contact .head-sns .head-sns-btn {
width: 30px;
margin-left: 10px
}

#l-header .head-right_contact .head-sns .head-sns-btn img {
width: 100%
}

#l-header .head-right_contact .head-sns .head-sns-btn a {
display: block
}

#l-header .head-right_contact .head-sns .head-sns-btn a:hover {
opacity: 0.6
}

#l-header .head-right_contact .head-contact {
display: flex;
flex-wrap: wrap;
margin-left: 20px
}

#l-header .head-txtbox {
display: flex;
flex-wrap: wrap;
align-items: center
}

#l-header .head-txtbox-left {
text-align: left;
margin-right: 20px
}

#l-header .head-txtbox-right {
margin-bottom: 10px
}

#l-header .head-txt {
text-align: left
}

#l-header .head-txt span {
background-color: #7ba146;
color: #fff;
padding: 2px 10px;
margin-right: 10px;
width: 96px;
text-align: center;
display: inline-block
}

#l-header .head-right_tel a {
background: transparent;
padding: 0 15px;
color: #7ba146;
border-radius: 40px;
width: auto;
height: auto;
font-family: 'Fjalla One', sans-serif;
font-weight: 500;
font-size: 2.2rem;
position: relative
}

#l-header .head-right_tel a:before {
font-family: "Font Awesome 5 Free";
content: "\f879";
font-weight: 900;
font-size: 1.6rem
}

#l-header .head-right_tel a:hover {
opacity: 0.6
}

#l-header .head-right_mail {
margin-left: 10px
}

#l-header .head-right_mail a {
background-color: #7ba146;
padding: 4px 20px;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
color: #fefefe
}

#l-header .head-right_mail a:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900;
padding-right: 6px
}

#l-header .head-right_mail a:hover {
background: #412d26
}

.header-toptxt {
background-color: #02A1E6;
color: #fff;
font-size: 1.2rem;
padding: 2px 0;
text-align: center
}

@media all and (max-width: 1100px) {
.header-toptxt {
padding: 2px 10px
}
}

@media all and (max-width: 896px) {
.header-toptxt {
display: none
}
}

#l-nav.is-fixed {
max-width: 100%;
position: fixed;
background-color: #fff;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
margin: 0 auto;
border-radius: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-height: 94px;
transition: 0.8s;
border-bottom: 4px solid #02A1E6
}

#l-nav.is-fixed #header_nav {
margin-top: 10px
}

#l-nav.is-fixed #header_nav ul {
background-color: transparent
}

#l-nav.is-fixed #header_nav ul a {
color: #333
}

#l-nav.is-fixed #header_nav ul a:hover,
#l-nav.is-fixed #header_nav ul a.active {
color: #02A1E6
}

#l-nav.is-fixed #header_nav ul a:hover:after,
#l-nav.is-fixed #header_nav ul a.active:after {
width: 20px
}

#l-nav.is-fixed #header_nav ul a:after {
position: absolute;
content: "";
width: 0;
height: 2px;
background: #155ebe;
left: 50%;
transform: translateX(-50%);
bottom: -5px;
transition: 0.2s width ease-in
}

#header_nav {
position: relative;
transition: all 0.3s ease-in;
margin-left: auto;
margin-top: 30px
}

#header_nav ul {
display: flex;
flex-wrap: wrap;
max-width: 920px;
justify-content: center;
text-align: center;
margin: 0 auto;
padding: 10px;
background-color: #02A1E6;
border-radius: 40px
}

#header_nav ul li {
position: relative
}

@media all and (max-width: 1100px) {
#header_nav ul li {
width: auto;
padding: 0;
margin-left: 20px
}
}

#header_nav ul li a {
display: table-cell;
vertical-align: middle;
padding: 0 20px;
letter-spacing: 0.1em;
position: relative;
font-size: 1.4rem;
color: #fff;
font-weight: 600;
height: 50px;
text-align: center;
background-repeat: repeat-y;
background-position: left top;
background-image: linear-gradient(to bottom, #fff 25%, transparent 25%, transparent 50%, transparent 50%, transparent 75%, transparent 75%, transparent);
background-size: 1px 3px
}

#header_nav ul li a span {
display: block;
font-size: 1.3rem;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
color: #02A1E6;
position: relative;
line-height: 1.2
}

#header_nav ul li a:hover,
#header_nav ul li a.active {
color: #333
}

#header_nav ul li a:hover:before,
#header_nav ul li a.active:before {
transform: translateY(-5px)
}

#header_nav ul li:first-child a {
background: none
}

#header_nav .dropdown {
display: none;
position: absolute;
left: 0;
top: 40px;
z-index: 999;
padding-top: 20px
}

#header_nav .dropdown .dropdown-li {
border-right: 0;
margin: 0;
background: #fff;
border-bottom: 1px solid #7ba146
}

#header_nav .dropdown .dropdown-li a {
display: block;
width: 140px;
padding: 8px;
font-size: 1.4rem;
letter-spacing: 0.1rem;
color: #333
}

#header_nav .dropdown .dropdown-li a:hover {
color: #02A1E6
}

#header_nav .dropdown .dropdown-li a:after {
display: none
}

.content_mail {
margin-left: 10px
}

.content_mail a {
background-color: #02A1E6;
padding: 4px 20px;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
color: #fefefe
}

.content_mail a:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900;
padding-right: 6px
}

.content_mail a:hover {
background: #155ebe
}

@media all and (max-width: 639px) {
.content_mail {
text-align: center
}
}

.content_tel a {
background: transparent;
padding: 0 15px;
color: #02A1E6;
border-radius: 40px;
width: auto;
height: auto;
font-family: 'Fjalla One', sans-serif;
font-weight: 500;
font-size: 2.2rem;
position: relative
}

.content_tel a:before {
font-family: "Font Awesome 5 Free";
content: "\f879";
font-weight: 900;
font-size: 1.6rem
}

.content_tel a:hover {
opacity: 0.6
}

@media all and (max-width: 639px) {
.content_tel {
text-align: center
}
}

#page-top {
position: fixed;
bottom: 10px;
right: 7px;
z-index: 200
}

#page-top a {
display: block;
background: #555;
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
font-size: 1.2rem;
text-align: center
}

#page-top a:hover {
opacity: 0.6
}

@media all and (max-width: 639px) {
#page-top {
bottom: 45px
}
}

@keyframes zoom-in {
0% {
transform: scale(1)
}

100% {
transform: scale(1.12)
}
}

#canvas-container {
position: absolute;
z-index: 20;
left: 0;
bottom: -10px
}

@media all and (max-width: 639px) {
#canvas-container #sineCanvas {
height: 70px;
width: 100%
}
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
animation: zoom-in 11s linear 0s 1 normal both
}

.swiper-slide {
position: relative
}

.swiper-slide:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
right: 0;
top: 0;
background-position: 50%;
background-size: cover;
z-index: -1
}

.swiper-slide.slide1:before {
background-image: url(/wp-content/themes/PEP/img/1.jpg);
background-position: 60% 50%
}

.swiper-slide.slide2:before {
background-image: url(/wp-content/themes/PEP/img/2.jpg);
background-position: 50% 50%
}

.swiper-slide.slide3:before {
background-image: url(/wp-content/themes/PEP/img/3.jpg);
background-position: 90% 50%
}

.slide-img {
overflow: hidden;
width: 100%;
height: 100vh
}

.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit: cover;"
}

@media all and (max-width: 896px) {
.slide-img {
height: 55vh
}
}

@media all and (max-width: 639px) {
.slide-img {
height: 68vh
}
}

#slideshow {
position: relative;
margin: -30px auto 0;
width: 100%
}

#slideshow .wave {
top: auto;
bottom: -1px;
fill: #f2f7ff
}

#catch {
z-index: 50;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 30%;
width: 40%;
opacity: 1
}

#catch img {
width: 100%
}

#catch.on {
opacity: 1;
transition: 2s
}

@media all and (max-width: 896px) {
#catch {
width: 60%;
bottom: 23%
}
}

@media all and (max-width: 639px) {
#catch {
width: 90%;
bottom: 38%
}
}

@media all and (max-width: 639px) {
.pconly {
display: none
}
}

.sponly {
display: none
}

@media all and (max-width: 639px) {
.sponly {
display: block;
opacity: 1 !important
}
}

#scrolldown {
position: absolute;
right: 15px;
bottom: 60px;
color: #fefefe;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
writing-mode: vertical-rl;
-webkit-text-orientation: mixed;
text-orientation: mixed;
font-feature-settings: "pkna";
font-size: 1.4rem;
z-index: 100;
height: 210px
}

#scrolldown:before,
#scrolldown:after {
position: absolute;
content: "";
z-index: 2;
left: 50%
}

#scrolldown:before {
width: 1px;
height: 100px;
bottom: 0;
background: #f0f0f0;
transform: translateX(-50%)
}

#scrolldown:after {
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.9);
border-radius: 100%;
top: 100px;
margin-left: -4px;
animation: scroll-point 2.3s ease-out infinite;
animation-fill-mode: both
}

@media all and (max-width: 896px) {
#scrolldown {
display: none
}
}

@keyframes scroll-point {
0% {
bottom: 0;
opacity: 0
}

20% {
opacity: 1
}

50% {
top: 180px;
opacity: 1
}

80% {
opacity: 0
}

100% {
top: 210px;
opacity: 0
}
}

#l-banner {
position: absolute;
top: 300px;
right: 0px;
background-color: #fff;
border-top: 4px solid #02A1E6;
border-bottom: 4px solid #02A1E6;
border-left: 4px solid #02A1E6;
padding: 20px 20px 20px 20px;
border-radius: 10px 0 0 10px;
z-index: 1
}

@media all and (max-width: 896px) {
#l-banner {
width: 30%;
top: 80px
}
}

@media all and (max-width: 639px) {
#l-banner {
width: 65%;
top: 500px
}
}

#l-banner .subtxt {
color: #333;
text-align: center;
margin: 0 auto
}

@media all and (max-width: 896px) {
#l-banner .subtxt {
font-size: 1.2rem;
letter-spacing: 0.06rem
}
}

@media all and (max-width: 639px) {
#l-banner .subtxt {
font-size: 9px
}
}

#l-banner .banner-link {
display: block;
position: relative
}

#l-banner .banner-link:before {
position: absolute;
content: "";
background: url("/wp-content/themes/PEP//top-banner-deko.png") no-repeat;
width: 40px;
height: 44px;
top: -40px;
left: -40px
}

@media all and (max-width: 639px) {
#l-banner .banner-link .flex {
display: flex
}

#l-banner .banner-link .flex .flex-30 {
width: 30%
}

#l-banner .banner-link .flex .flex-68 {
width: 68%;
margin-left: 2%
}
}

#l-banner .banner-txt {
text-align: center;
padding-left: 20px
}

@media all and (max-width: 896px) {
#l-banner .banner-txt {
padding-left: 5px;
font-size: 1.2rem;
letter-spacing: 0.06rem
}
}

@media all and (max-width: 639px) {
#l-banner .banner-txt {
font-size: 9px
}
}

#l-banner .ttl {
font-weight: bold
}

#l-banner .txt {
background: #1062db;
background: linear-gradient(83deg, #1062db 0%, #02a1e6 100%);
color: #fff;
padding: 5px 10px;
border-radius: 30px
}

#l-banner:hover {
background-color: #02A1E6;
color: #fff;
transition: 0.8s
}

#l-banner:hover .ttl {
color: #fff
}

#l-banner:hover .txt {
background: #fff;
color: #02A1E6
}

.contact-sns {
display: flex;
flex-wrap: wrap
}

.contact-sns .contact-sns-txt {
font-size: 1.4rem;
font-weight: bold;
margin-left: 20px
}

.contact-sns .contact-sns-btn {
width: 30px;
margin-left: 10px
}

.contact-sns .contact-sns-btn img {
width: 100%
}

.contact-sns .contact-sns-btn a {
display: block
}

.contact-sns .contact-sns-btn a:hover {
opacity: 0.6
}

.contact-map {
margin-left: 30px
}

.contact-map .contact-map-btn {
border: 2px solid #fff;
border-radius: 100px;
padding: 2px 20px;
font-size: 1.4rem
}

.contact-map .contact-map-btn a {
color: #fff;
font-weight: bold;
display: block
}

.contact-map .contact-map-btn:hover {
border: 2px solid #f38647;
background-color: #f38647;
transition: 0.3s
}

.contact-mailbox {
position: relative
}

.contact-mailbox:hover .contact-cricle {
animation: 20s linear infinite rotation;
border: 2px dotted #fcd917
}

.contact-cricle {
position: absolute;
top: -30px;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
border: 2px dotted #fff;
width: 126px;
height: 126px
}

.contact-mail {
display: block;
color: #fff;
font-weight: bold;
text-align: center
}

.contact-mail i {
font-size: 3rem
}

@keyframes rotation {
0% {
transform: rotate(0)
}

100% {
transform: rotate(360deg)
}
}

.contact_bnr {
display: flex;
flex-wrap: wrap;
align-items: center
}

.contact_bnr>li:first-child {
flex: 1
}

.contact_bnr>li .bnr_tel {
white-space: nowrap;
position: relative;
color: #fff;
font-size: 3.2rem;
line-height: 1.2;
padding: 8px 0 0;
font-family: 'Fjalla One', sans-serif;
font-weight: 500
}

.contact_bnr>li .bnr_tel:before {
font-family: "Font Awesome 5 Free";
content: "\f879";
font-weight: 900;
font-size: 0.7em;
margin-right: 5px
}

.contact_bnr>li .bnr_tel:hover {
color: #7ba146
}

@media all and (max-width: 896px) {
.contact_bnr>li .bnr_tel {
font-size: 2.6rem
}
}

@media all and (max-width: 639px) {
.contact_bnr>li .bnr_tel {
font-size: 2.2rem;
text-align: center
}
}

.contact_bnr>li .bnr_reserve {
display: block;
width: 60px;
height: 60px;
padding: 10px 0 0;
text-align: center;
color: #fff;
transition: background 0.2s cubic-bezier(0.26, 0.06, 0, 1);
background: #155ebe
}

.contact_bnr>li .bnr_reserve i {
font-size: 1.8rem;
line-height: 1.2;
display: block
}

.contact_bnr>li .bnr_reserve span {
font-weight: bold;
display: block;
font-size: 1.2rem;
letter-spacing: 0
}

@media all and (max-width: 639px) {
.contact_bnr>li .bnr_reserve {
width: 65px
}

.contact_bnr>li .bnr_reserve i {
font-size: 1.6rem
}

.contact_bnr>li .bnr_reserve span {
font-size: 13px
}
}

.contact_bnr>li .bnr_fax {
background: #fdfdfd;
color: #02A1E6
}

.contact_bnr>li .bnr_fax:before {
font-family: "Font Awesome 5 Free";
content: "\f1ac";
font-weight: 900
}

.contact_bnr>li .bnr_mail {
background: #fffcf2;
color: #412d26;
padding: 17px 0;
font-size: 1.8rem
}

@media all and (max-width: 639px) {
.contact_bnr>li .bnr_mail {
font-size: 1.4rem
}
}

.contact_bnr>li .bnr_mail:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900
}

.contact_bnr>li .bnr_mail:hover {
color: #02A1E6
}

.contact_bnr>li a {
display: block;
color: #fff;
font-size: 2rem;
font-weight: 600;
text-align: center;
letter-spacing: 0.2rem;
padding: 12px 10px
}

.contact_bnr>li a:before {
margin-right: 5px;
font-size: 0.85em;
position: relative;
display: inline-block
}

@media all and (max-width: 639px) {
.contact_bnr>li a {
margin: 0 auto;
white-space: nowrap;
padding: 10px 0;
width: 100%
}

.contact_bnr>li a:before {
font-size: 1.5rem;
transform: translateY(-2px)
}
}

.slide_list li {
max-width: 500px;
margin-right: 40px;
position: relative;
padding-bottom: 26px
}

.slide_list li::before {
content: "";
position: absolute;
bottom: 12px;
right: -14px;
width: 100%;
height: 90%;
background: #155ebe;
z-index: -1;
border-radius: 10px
}

.slide_list li img {
border-radius: 10px;
object-fit: cover;
width: 100%
}

#l-footer {
font-size: 1.4rem;
position: relative;
background: #777
}

#l-footer .inner {
margin: 0 auto;
padding: 55px 20px 40px;
max-width: 1200px;
position: relative;
z-index: 3
}

#l-footer .inner .mtitle {
margin-top: 0
}

#l-footer .inner .mtitle:before {
display: none
}

#l-footer .inner .list-icon {
position: absolute;
top: -50px;
left: 0;
right: 0;
margin: 0 auto;
width: 140px;
height: 100px
}

#l-footer .inner .list-icon img {
width: 100%
}

#l-footer .inner .footer-column {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
text-align: center;
color: #fff
}

#l-footer .inner .footer-column .footer-left {
width: 30%
}

@media all and (max-width: 1100px) {
#l-footer .inner .footer-column .footer-left {
width: 90%;
margin: 0 auto 40px;
margin-left: auto
}
}

#l-footer .inner .footer-column .footer-center {
width: 30%;
margin-left: 2%
}

@media all and (max-width: 1100px) {
#l-footer .inner .footer-column .footer-center {
width: 40%;
margin-left: auto
}
}

@media all and (max-width: 896px) {
#l-footer .inner .footer-column .footer-center {
width: 90%;
margin: 0 auto;
margin-left: auto
}
}

#l-footer .inner .footer-column .footer-right {
width: 30%;
margin-left: 2%
}

@media all and (max-width: 1100px) {
#l-footer .inner .footer-column .footer-right {
width: 50%;
margin-left: 2%
}
}

@media all and (max-width: 896px) {
#l-footer .inner .footer-column .footer-right {
width: 100%;
margin: 50px auto 0;
margin-left: 20px;
margin-right: 0px
}
}

#l-footer .footer_tel a {
background: transparent;
padding: 0 15px;
color: #fff;
border-radius: 40px;
width: auto;
height: auto;
font-family: 'Fjalla One', sans-serif;
font-weight: 500;
font-size: 2.2rem;
position: relative
}

#l-footer .footer_tel a:before {
font-family: "Font Awesome 5 Free";
content: "\f879";
font-weight: 900;
font-size: 1.6rem
}

#l-footer .footer_tel a:hover {
opacity: 0.6
}

#l-footer .footer_mail {
margin-top: 10px;
margin-left: 10px
}

#l-footer .footer_mail a {
background-color: #fff;
border: 1px solid #fff;
padding: 4px 20px;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
color: #333
}

#l-footer .footer_mail a:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900;
padding-right: 6px
}

#l-footer .footer_mail a:hover {
transition: 0.8s;
background: transparent
}

@media all and (max-width: 639px) {
#l-footer .footer-bnr-list {
padding: 0 30px
}
}

#l-footer .footer-txt {
padding-left: 8px
}

#l-footer .footer-txt span {
background: #02A1E6;
padding: 5px 10px;
font-size: 13px;
color: #fefefe
}

@media all and (max-width: 639px) {
#l-footer {
font-size: 1.2rem
}

#l-footer .inner {
padding: 40px 10px
}
}

.footer_navi {
display: flex;
flex-wrap: wrap
}

.footer_navi ul {
width: 48%
}

@media all and (max-width: 1100px) {
.footer_navi ul {
max-width: 180px
}
}

.footer_navi ul li {
text-align: left;
position: relative;
padding: 0 10px;
margin-bottom: 8px
}

.footer_navi ul li:before {
position: absolute;
content: "";
width: 15px;
height: 15px;
background: url("/wp-content/themes/PEP/img/footer-arrow.png") no-repeat;
background-size: contain;
left: -10px;
top: 3px
}

.footer_navi ul li a {
display: block;
position: relative;
font-size: 1.3rem;
color: #fff;
font-weight: 600
}

.footer_navi ul li a span {
display: block;
font-size: 1.3rem;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
color: #02A1E6;
position: relative;
line-height: 1.2
}

.footer_navi ul li a:after {
position: absolute;
content: "";
width: 0;
height: 2px;
background: #02A1E6;
left: 50%;
transform: translateX(-50%);
bottom: -5px;
transition: 0.2s width ease-in
}

.footer_navi ul li a:hover,
.footer_navi ul li a.active {
color: rgba(65, 45, 38, 0.9)
}

.footer_navi ul li a:hover:before,
.footer_navi ul li a.active:before {
transform: translateY(-5px)
}

.footer_navi .dropdown {
display: none;
position: absolute;
left: 0;
top: 40px;
z-index: 999;
padding-top: 20px
}

.footer_navi .dropdown .dropdown-li {
border-right: 0;
margin: 0;
background: #fff;
border-bottom: 1px solid #7ba146
}

.footer_navi .dropdown .dropdown-li a {
display: block;
width: 140px;
padding: 8px;
font-size: 1.4rem;
letter-spacing: 0.1rem;
color: #333
}

.footer_navi .dropdown .dropdown-li a:hover {
color: #02A1E6
}

.footer_navi .dropdown .dropdown-li a:after {
display: none
}

.flogo {
max-width: 300px;
margin: 0 auto 20px;
min-height: 0;
position: relative;
z-index: 5
}

.flogo.type2 {
max-width: 520px
}

@media all and (max-width: 639px) {
.flogo.type2 {
max-width: 85%
}
}

@media all and (max-width: 639px) {
.flogo {
max-width: 78%
}
}

.address {
font-weight: 600;
text-align: center;
color: #fff
}

.footer-dl {
display: flex;
flex-wrap: wrap;
font-size: 13px;
justify-content: space-between;
text-align: left
}

@media all and (max-width: 639px) {
.footer-dl {
font-size: 12px;
max-width: 90%;
margin: 10px auto
}
}

.footer-dl dt,
.footer-dl dd {
padding-bottom: 3px
}

.footer-dl dt {
width: 5em;
border-bottom: 0.9px solid #02A1E6;
color: #02A1E6
}

.footer-dl dd {
width: calc(100% - 6em);
letter-spacing: 0
}

.copyright {
padding: 10px 0;
font-size: 1.2rem;
position: relative;
z-index: 2;
color: #fffcf2;
background: #155ebe
}

@media all and (max-width: 896px) {
.copyright {
font-size: 12px;
padding: 15px 0 68px
}
}

.bg-basecolor {
background: #02A1E6;
position: relative
}

.bg-white {
background: #fff;
position: relative;
padding: 40px 0
}

.bg-noise {
background: url(../img/bg-noise.png) repeat;
background-size: 100px;
position: relative
}

.bg-noise.type-tree:before {
position: absolute;
content: "";
background: url(../img/bg-tree.png) repeat-x;
width: 100%;
height: 306px;
bottom: 0
}

.bg-strip {
background-image: linear-gradient(-45deg, #fdf1f5 25%, #fff 25%, #fff 50%, #fdf1f5 50%, #fdf1f5 75%, #fff 75%, #fff);
background-size: 10px 10px
}

.bg-strip.type2 {
background-image: linear-gradient(-45deg, #fdf3f1 25%, #fff 25%, #fff 50%, #fdf3f1 50%, #fdf3f1 75%, #fff 75%, #fff);
background-size: 10px 10px
}

.bg-strip.type3 {
background-image: linear-gradient(-45deg, #eefbff 25%, #fff 25%, #fff 50%, #eefbff 50%, #eefbff 75%, #fff 75%, #fff);
background-size: 10px 10px
}

.bg-strip.type4 {
background-image: linear-gradient(-45deg, #eeffef 25%, #fff 25%, #fff 50%, #eeffef 50%, #eeffef 75%, #fff 75%, #fff);
background-size: 10px 10px
}

.bg-strip.type5 {
background-image: linear-gradient(-45deg, #f5eeff 25%, #fff 25%, #fff 50%, #f5eeff 50%, #f5eeff 75%, #fff 75%, #fff);
background-size: 10px 10px
}

.bg-strip.top-arch {
position: relative
}

.bg-strip.top-arch:before {
position: absolute;
content: "";
background: url(../img/top-arch.png) no-repeat center;
background-size: contain;
max-width: 1200px;
height: 350px;
top: -50px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1
}

@media all and (max-width: 1100px) {
.bg-strip.top-arch:before {
margin: 0 20px
}
}

@media all and (max-width: 896px) {
.bg-strip.top-arch:before {
margin: 0 20px;
height: 220px
}
}

@media all and (max-width: 639px) {
.bg-strip.top-arch:before {
margin: 0 20px;
height: 150px
}
}

@media all and (max-width: 320px) {
.bg-strip.top-arch:before {
margin: 0 20px;
height: 100px
}
}

.bg-strip.top-arch .single {
z-index: 2
}

.top-icon {
position: relative
}

.top-icon:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(../img/bg-top-icon.jpg) no-repeat center/cover;
z-index: -2;
opacity: 0.7
}

.top-feature-box {
max-width: 1200px;
margin: 0 auto;
position: relative
}

.top-feature-box .mainttl {
font-size: 2rem;
color: transparent;
background: linear-gradient(45deg, #e60012 20%, #f39800 30%, #fff100 40%, #094 50%, #0068b7 60%, #1d2088 70%, #920783 80%);
-webkit-background-clip: text
}

.top-feature-box.pagebox {
margin-top: 100px;
padding-bottom: 50px
}

.top-feature-ttl {
margin: -40px auto 0;
padding-top: 40px;
text-align: center
}

.top-feature {
margin-top: 30px
}

.top-feature.under-arrow li {
position: relative
}

.top-feature.under-arrow li::after {
position: absolute;
border: 20px solid transparent;
border-top-color: #02A1E6;
content: "";
height: 0;
left: 0;
right: 0;
margin: 0 auto;
bottom: -60px;
width: 0
}

.top-feature.under-arrow li:last-child:after {
display: none
}

.top-feature figure {
margin: 0 auto;
width: 90%;
max-width: 150px;
text-align: center
}

.top-feature figure img {
width: 100%
}

@media all and (max-width: 639px) {
.top-feature figure {
width: 60%
}
}

@media all and (max-width: 639px) {
.top-feature .top-feature-txt {
margin-bottom: 40px
}
}

.top-feature .top-feature-txt .title {
background-color: #02A1E6;
color: #fff;
display: inline-block;
padding: 8px 50px;
text-align: center;
border-radius: 20px;
margin-bottom: 20px
}

.top-feature .top-feature-txt .txt {
padding: 0 20px;
text-align: left
}

@media all and (max-width: 639px) {
.top-feature .top-feature-txt .txt {
padding: 0
}
}

.top-feature .top-feature-txt2 {
text-align: left
}

@media all and (max-width: 639px) {
.top-feature .top-feature-txt2 {
margin-bottom: 40px
}
}

.top-feature .top-feature-txt2 .title {
margin-bottom: 20px;
font-weight: bold;
border-bottom: 2px dotted #02A1E6;
padding-bottom: 5px;
font-size: 1.8rem
}

@media all and (max-width: 639px) {
.top-feature .top-feature-txt2 .title {
margin-top: 20px;
font-size: 1.6rem
}
}

.top-feature .top-feature-txt2 .title .num {
background-color: #02A1E6;
color: #fff;
font-size: 2rem;
padding: 10px 20px;
margin-right: 20px;
font-family: "Ubuntu", sans-serif;
font-weight: 600
}

@media all and (max-width: 639px) {
.top-feature .top-feature-txt2 .title .num {
font-size: 1.8rem;
padding: 8px 15px
}
}

.top-feature .top-feature-txt2 .txt {
padding: 0 20px;
text-align: left
}

@media all and (max-width: 639px) {
.top-feature .top-feature-txt2 .txt {
padding: 0
}
}

.feature-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 50px
}

@media all and (max-width: 896px) {
.feature-list {
max-width: 70%;
margin: 0 auto
}
}

@media all and (max-width: 639px) {
.feature-list {
max-width: 90%
}
}

.feature-list>li {
width: 31%;
position: relative
}

.feature-list>li:nth-child(2n) {
transform: translateY(50px)
}

@media all and (max-width: 896px) {
.feature-list>li:nth-child(2n) {
transform: inherit
}
}

@media all and (max-width: 896px) {
.feature-list>li {
width: 100%;
margin: 0 auto 35px
}
}

.feature-list>li .feature-inner {
width: 100%;
height: 100%;
position: relative;
border: 0.9px solid rgba(65, 45, 38, 0.8);
overflow: hidden;
border-radius: 20px;
transition: background 0.2s ease-in;
background: rgba(255, 255, 255, 0.4)
}

.feature-list>li figure {
width: 100%;
height: 250px
}

.feature-list>li figure img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit: cover;"
}

@media all and (max-width: 1100px) {
.feature-list>li figure {
width: 100%;
height: 250px
}
}

.feature-list>li .feature-num {
display: block;
position: absolute;
font-size: 4.5rem;
color: #02A1E6;
left: 20px;
top: -20px;
z-index: 3;
width: 80px
}

.feature-list>li .feature-txt {
position: relative;
padding: 30px
}

@media all and (max-width: 639px) {
.feature-list>li .feature-txt {
padding: 25px 15px
}
}

.feature-list>li .feature-title {
color: #412d26;
font-size: 2rem;
font-weight: 600
}

@media all and (max-width: 639px) {
.feature-list>li .feature-title {
font-size: 1.4rem
}
}

.feature-list>li:hover .feature-inner {
background: rgba(255, 252, 242, 0.8)
}

@media all and (max-width: 639px) {
.feature-list {
padding: 0 10px
}
}

.icon-title {
color: #412d26;
font-size: 1.4rem;
font-weight: 600;
padding-top: 5px;
letter-spacing: 0.2em;
margin-bottom: 10px
}

@media all and (max-width: 639px) {
.icon-title {
font-size: 1.2rem;
font-size: 1.2rem;
display: inline-block;
vertical-align: top;
padding: 8% 0 0 15px
}
}

.icon-list-wrap {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center
}

@media all and (max-width: 896px) {
.icon-list-wrap {
flex-direction: column
}
}

.icon-list {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
position: relative;
z-index: 2
}

@media all and (max-width: 896px) {
.icon-list {
width: 100%
}
}

.icon-list li {
width: 24%;
border: solid 2px rgba(255, 252, 242, 0.7);
margin-bottom: 30px;
border-radius: 8px;
margin-right: calc(1% + (1% / 3))
}

.icon-list li:nth-child(4n) {
margin-right: 0
}

.icon-list li:hover {
box-shadow: 0px 3px 0px 0px #b1d4a5
}

.icon-list li a {
display: block;
text-align: center;
font-weight: 600;
height: 100%;
transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1);
position: relative;
padding: 12px 0
}

@media all and (max-width: 639px) {
.icon-list li a {
text-align: left;
padding: 12px
}
}

.icon-list li a img {
width: 170px;
border-radius: 10px
}

@media all and (max-width: 639px) {
.icon-list li a img {
width: 130px
}
}

.icon-list li a:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
background-image: linear-gradient(70deg, #fffcf2, #fff, #fff, #fffcf2);
opacity: 0.7;
border-radius: 8px;
z-index: -1;
transition: all 0.2s cubic-bezier(0.26, 0.06, 0, 1)
}

.icon-list li a:hover {
color: #412d26
}

.icon-list li a:hover:before {
opacity: 0.9;
transform: translate(-50%, -50%) scale(0.9)
}

@media all and (max-width: 639px) {
.icon-list li {
width: 100%;
margin-right: 0%
}

.icon-list li p {
display: inline-block
}

.icon-list li:nth-child(2n) {
margin-right: 0
}
}

.icon-list.type1 {
display: blcok;
width: 25%
}

.icon-list.type1 li {
width: 100%
}

.icon-list.type1 li a {
padding: 0 0 15px
}

.icon-list.type1 li a img {
width: 100%
}

@media all and (max-width: 896px) {
.icon-list.type1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%
}

.icon-list.type1 li {
width: 48%
}
}

.icon-list.type2 {
width: 100%
}

.icon-list.type2 li {
width: 19%;
margin-right: 1.25%
}

.icon-list.type2 li:nth-child(4n) {
margin-right: 1.25%
}

.icon-list.type2 li:nth-child(5n) {
margin-right: 0
}

@media all and (max-width: 639px) {
.icon-list.type2 li {
width: 48%;
margin-right: 4%
}

.icon-list.type2 li:nth-child(5n) {
margin-right: 4%
}

.icon-list.type2 li:nth-child(2n) {
margin-right: 0
}
}

.pickup-img {
position: relative
}

.pickup-img .pick-lead {
position: absolute;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
color: #412d26;
left: 10px;
top: -30px;
opacity: 0.8;
font-size: 3rem
}

@media all and (max-width: 639px) {
.pickup-img .pick-lead {
font-size: 2rem;
top: -15px
}
}

.bnr-box {
padding: 40px 0;
text-align: center
}

@media all and (max-width: 639px) {
.bnr-box {
padding: 20px
}
}

.title01 {
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 20px;
color: #7ba146;
padding-bottom: 6px;
border-bottom: 2px solid rgba(2, 161, 230, 0.5)
}

.title01 span {
display: block;
font-size: 2.2rem;
color: #02A1E6
}

@media all and (max-width: 639px) {
.title01 {
font-size: 1.3rem
}

.title01 span {
font-size: 1.6rem
}
}

.map-big {
width: 100%;
height: 350px;
border-bottom: 5px solid #d9e7ff;
box-shadow: 0 5px #fff
}

@media all and (max-width: 639px) {
.map-big {
height: 280px
}
}

.news-box {
margin: 0 auto;
max-width: 1200px;
position: relative;
z-index: 10;
display: flex
}

@media all and (max-width: 896px) {
.news-box {
margin-top: 0
}
}

@media all and (max-width: 639px) {
.news-box {
flex-direction: column;
padding: 20px 10px
}
}

.news-title {
text-align: center;
font-weight: 600;
margin-bottom: 60px;
text-align: center;
position: relative
}

.news-title span {
display: block
}

.news-title .eng {
font-family: "Ubuntu", sans-serif;
font-weight: 600;
color: #02A1E6;
position: relative;
font-size: 2.5rem;
letter-spacing: 0.1em
}

.news-title .ja {
font-size: 2rem;
position: relative;
margin: 0 auto;
margin-bottom: 20px;
writing-mode: vertical-rl;
-webkit-text-orientation: mixed;
text-orientation: mixed;
font-feature-settings: "pkna";
font-weight: 600;
color: #7ba146
}

@media all and (max-width: 639px) {
.news-title {
margin-bottom: 30px
}

.news-title .eng {
font-size: 2.5rem
}

.news-title .ja {
font-size: 1.5rem;
writing-mode: inherit;
margin-bottom: 0
}
}

.news-right {
flex: 1;
margin-left: 60px
}

@media all and (max-width: 639px) {
.news-right {
width: 100%;
margin: 40px 0 0
}
}

.top-bnr-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto
}

.top-bnr-list>li {
width: 31%;
position: relative
}

.top-bnr-list>li a {
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: 2
}

.top-bnr-list>li a:hover {
transition: all 0.2s ease-in
}

.top-bnr-list>li a:hover .btn-arrow {
background: #c79244
}

.top-bnr-list>li a:hover .btn-arrow i {
border-bottom-color: #fefefe
}

.top-bnr-list>li a:hover .btn-arrow i:before {
border-right-color: #fefefe
}

.top-bnr-list>li a:hover .top-bnr-img img {
transform: scale(1.05)
}

@media all and (max-width: 1100px) {
.top-bnr-list {
width: 85%;
margin: 0 auto
}

.top-bnr-list>li {
width: 48%;
margin-bottom: 20px
}
}

@media all and (max-width: 639px) {
.top-bnr-list {
width: 95%
}

.top-bnr-list>li {
width: 100%
}
}

.top-bnr-list .top-bnr-img {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
}

.top-bnr-list .top-bnr-img img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit: cover;";
transition: all 0.2s ease-in
}

@media all and (max-width: 639px) {
.top-bnr-list .top-bnr-img {
height: 200px
}
}

.top-bnr-list .btn-arrow {
width: 60px;
height: 60px;
position: absolute;
right: 20px;
top: 210px;
text-align: center;
line-height: 60px;
background: #fefefe;
border: 2px solid #c79244;
border-radius: 100%;
transition: all 0.2s ease-in
}

@media all and (max-width: 639px) {
.top-bnr-list .btn-arrow {
top: 170px
}
}

.top-bnr-list .btn-arrow i {
display: block;
position: absolute;
width: 30px;
border-bottom: 2px solid #c79244;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 5px
}

.top-bnr-list .btn-arrow i:before {
position: absolute;
width: 10px;
height: 8px;
content: "";
right: 3px;
bottom: -2px;
border-right: 3px solid #c79244;
transform: skew(45deg)
}

.top-bnr-list .top-bnr-title {
font-weight: 600;
margin-top: -40px;
position: relative;
z-index: 5
}

.top-bnr-list .top-bnr-title .eng {
font-family: "Ubuntu", sans-serif;
font-weight: 600;
font-size: 2.5rem;
letter-spacing: 0.1em;
color: #02A1E6;
padding: 10px 10px 6px;
background: #fefefe
}

.top-bnr-list .top-bnr-title .ja {
font-size: 1.5rem;
padding: 6px 10px;
color: #fefefe;
background: #02A1E6
}

@media all and (max-width: 639px) {
.top-bnr-list .top-bnr-title .eng {
font-size: 2.2rem
}

.top-bnr-list .top-bnr-title .ja {
font-size: 1.3rem
}
}

.top-bnr-list .top-bnr-txt {
color: #222;
font-size: 1.4rem;
padding: 10px
}

@media all and (max-width: 639px) {
.top-bnr-list .top-bnr-txt {
font-size: 1.2rem
}
}

.map-link {
font-weight: 600;
color: #02A1E6;
border-bottom: 1px solid #02A1E6
}

.map-link:before {
font-family: "Font Awesome 5 Free";
content: "\f3c5";
font-weight: 900;
margin-right: 5px
}

.single {
max-width: 1200px;
margin: 100px auto;
padding: 80px 0;
position: relative
}

.single.type2 {
margin: 40px auto
}

.single.type-pt0 {
padding-top: 0px
}

.single.type-mt0 {
margin-top: 0px
}

.single.type-mb0 {
margin-bottom: 0px
}

.single.b-m100 {
margin-bottom: 100px
}

.single.p-m100 {
padding-bottom: 100px
}

@media all and (max-width: 1100px) {
.single.s-p100 {
padding: 60px 20px 100px
}
}

@media all and (max-width: 1100px) {
.single {
padding: 80px 20px 0
}
}

@media all and (max-width: 639px) {
.single {
padding: 60px 20px 0
}
}

.single.bg-noise {
border-radius: 40px
}

@media all and (max-width: 896px) {
.single.bg-noise {
border-radius: 20px;
padding-bottom: 40px;
margin-left: 20px;
margin-right: 20px
}
}

.single02 {
max-width: 1200px;
margin: 80px auto;
padding: 60px 0;
position: relative
}

@media all and (max-width: 1100px) {
.single02 {
margin: 80px auto
}
}

@media all and (max-width: 639px) {
.single02 {
margin: 60px auto
}
}

.single03 {
max-width: 1500px;
margin: 0 auto;
padding: 80px 0;
position: relative
}

@media all and (max-width: 1100px) {
.single03 {
padding: 80px 10px
}
}

@media all and (max-width: 639px) {
.single03.sp-type {
padding: 120px 10px 50px
}
}

.margin-top {
margin-top: -80px
}

@media all and (max-width: 639px) {
.margin-top {
margin-top: -30px
}
}

.mbox {
background: #fefefe;
padding: 30px;
position: relative;
z-index: 3;
max-width: 1200px;
margin-right: auto;
margin-left: auto
}

.mbox.transparent {
background: transparent;
padding: 0
}

@media all and (max-width: 639px) {
.mbox.transparent {
padding: 15px 10px
}
}

.mbox.type-radi {
border-radius: 20px
}

@media all and (max-width: 639px) {
.mbox {
padding: 15px 10px
}
}

.small-box {
max-width: 900px;
margin-right: auto;
margin-left: auto
}

@media all and (max-width: 639px) {
.small-box {
margin-left: 15px;
margin-right: 15px
}
}

.small-box.contact {
background-color: #fff;
text-align: left;
padding-bottom: 40px
}

.small-box.bg-w {
background-color: #fff;
padding: 40px
}

@media all and (max-width: 639px) {
.small-box.bg-w {
padding: 40px 20px
}
}

@media all and (max-width: 639px) {
.small-box.sp-m0 {
margin-left: auto;
margin-right: auto
}
}

.small-box.type1 {
max-width: 1050px
}

.small-box2 {
margin: 30px auto;
padding: 50px;
border: dashed 2px #fff;
border-radius: 40px
}

@media all and (max-width: 896px) {
.small-box2 {
padding: 20px;
border-radius: 20px
}
}

.small-box2.type2 {
padding: 20px 50px
}

.small-box2.type-green {
border: dashed 2px #7ba146
}

@media all and (max-width: 896px) {
.small-box2.type-green {
padding: 30px 20px;
border-radius: 20px
}
}

.small-box3 {
margin: 30px auto;
max-width: 1000px;
padding: 50px;
border: dashed 2px #d6dda4;
border-radius: 40px
}

@media all and (max-width: 896px) {
.small-box3 {
padding: 20px;
border-radius: 20px
}
}

.small-box3 .title {
margin: 0 auto;
text-align: center;
position: absolute;
top: -20px;
left: 0;
right: 0
}

.small-box3 .title .titlebox span {
display: inline-block;
background: #ec992b;
color: #fff;
padding: 5px 40px;
margin-bottom: 10px;
border-radius: 50px
}

.small-box3 .title .titlebox.type2 span {
background: #b2ec2b
}

.sentence p+p {
margin-top: 20px
}

#main {
float: left;
width: 76%
}

#main .mbox {
min-height: 300px
}

@media all and (max-width: 896px) {
#main .mbox {
min-height: initial
}
}

@media all and (max-width: 896px) {
#main {
float: none;
width: 100%
}
}

#side {
float: right;
position: sticky;
right: 0;
top: 0;
width: 21%;
padding-right: 10px
}

@media all and (max-width: 896px) {
#side {
float: none;
width: 100%;
position: static;
margin-top: 40px
}
}

.mtitle {
font-weight: 600;
font-size: 3rem;
margin: 0 auto 45px;
position: relative;
text-align: center
}

.mtitle.type-book {
padding-top: 20px
}

.mtitle.type-book:before {
position: absolute;
content: "";
width: 93px;
height: 70px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/book-icon.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-book {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-kuruma {
padding-top: 20px
}

.mtitle.type-kuruma:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/kurumaisu-icon.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-kuruma {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-03-1 {
padding-top: 20px
}

.mtitle.type-03-1:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon03-1.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-03-1 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-03-2 {
padding-top: 20px
}

.mtitle.type-03-2:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon03-2.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-03-2 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-03-3 {
padding-top: 20px
}

.mtitle.type-03-3:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon03-3.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-03-3 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-03-4 {
padding-top: 20px
}

.mtitle.type-03-4:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon03-4.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-03-4 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-04-1 {
padding-top: 20px
}

.mtitle.type-04-1:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon04-1.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-04-1 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-04-2 {
padding-top: 20px
}

.mtitle.type-04-2:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon04-2.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-04-2 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-05-1 {
padding-top: 20px
}

.mtitle.type-05-1:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon05-1.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-05-1 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-05-2 {
padding-top: 20px
}

.mtitle.type-05-2:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon05-2.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-05-2 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-05-3 {
padding-top: 20px
}

.mtitle.type-05-3:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon05-3.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-05-3 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-05-4 {
padding-top: 20px
}

.mtitle.type-05-4:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon05-4.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-05-4 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-05-5 {
padding-top: 20px
}

.mtitle.type-05-5:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon05-5.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-05-5 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-05-6 {
padding-top: 20px
}

.mtitle.type-05-6:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon05-6.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-05-6 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle.type-06-1 {
padding-top: 20px
}

.mtitle.type-06-1:before {
position: absolute;
content: "";
width: 96px;
height: 74px;
top: -70px;
left: 50%;
transform: translateX(-50%);
background: url(../img/icon06-1.png) no-repeat center/contain;
z-index: 1
}

@media all and (max-width: 639px) {
.mtitle.type-06-1 {
font-size: 2rem;
line-height: 4rem
}
}

.mtitle .eng {
font-size: 4.5rem;
color: #02A1E6;
position: relative;
z-index: 2;
display: block;
font-family: "Ubuntu", sans-serif;
font-weight: 500;
line-height: 1.2
}

.mtitle .ja {
position: relative;
z-index: 2;
font-size: 2rem;
color: #412d26;
font-weight: 600;
letter-spacing: 0.15em
}

.mtitle.twocolor .eng {
font-size: 3rem;
color: #02A1E6;
position: relative;
z-index: 2;
display: block;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
line-height: 1.2;
color: transparent;
background: #02A1E6;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(255, 255, 255, 0.4);
-webkit-background-clip: text
}

@media all and (max-width: 639px) {
.mtitle.twocolor .eng {
font-size: 2rem
}
}

.mtitle.twocolor2 .eng {
font-size: 3rem;
color: #02A1E6;
position: relative;
z-index: 2;
display: block;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
line-height: 1.2;
color: transparent;
background: #ff0000;
text-shadow: 0 0 0.1em rgba(90, 40, 40, 0.05), 0.01em 0.04em 0.03em rgba(255, 255, 255, 0.4);
-webkit-background-clip: text
}

@media all and (max-width: 639px) {
.mtitle.twocolor2 .eng {
font-size: 2rem
}
}

.mtitle.white {
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2)
}

.mtitle.white span {
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2)
}

.mtitle.white span:after {
background-color: #eee
}

.mtitle.white span.ja {
border-bottom-color: #fefefe
}

.mtitle.mtitle_left {
text-align: left;
margin-left: 0;
margin-right: 0
}

.mtitle.mtitle_left:before {
left: 2%;
transform: translate(0, -50%)
}

.mtitle.mtitle_left span:after {
left: 0;
transform: none
}

@media all and (max-width: 639px) {
.mtitle {
text-align: center
}

.mtitle .eng {
font-size: 2rem
}

.mtitle .eng.type-num {
font-size: 4rem
}

.mtitle .ja {
font-size: 2rem
}
}

@media all and (max-width: 639px) and (max-width: 639px) {
.mtitle .ja {
font-size: 1.6rem
}
}

.mtitle_ribon {
font-size: 1.8rem;
text-align: center;
position: relative
}

.mtitle_ribon:before {
position: absolute;
content: "";
width: 20px;
height: 4px;
background-color: #02A1E6;
left: 0;
right: 0;
margin: 0 auto;
bottom: -10px
}

.mtitle_ribon.type2:before {
background-color: #02A1E6
}

.mtitle_ribon.type3:before {
background-color: #7ba146
}

@media all and (max-width: 639px) {
.mtitle_ribon.min {
font-size: 1.4rem
}
}

@media all and (max-width: 639px) {
.mtitle_ribon.min2 {
font-size: 1.4rem
}
}

.mtitle_ribon.min2:before {
display: none
}

.fukidashi {
text-align: center;
font-size: 2rem;
color: #02A1E6
}

.fukidashi span {
position: relative;
display: inline-block
}

.fukidashi span:before {
content: "";
position: absolute;
width: 2px;
height: 25px;
background: #02A1E6;
top: 5px;
left: -30px;
transform: rotate(-20deg)
}

.fukidashi span:after {
content: "";
position: absolute;
width: 2px;
height: 25px;
background: #02A1E6;
top: 5px;
right: -30px;
transform: rotate(20deg)
}

.mtitle_circle {
position: relative;
margin-left: 0;
margin-right: 0;
text-align: center;
font-size: 2rem
}

.mtitle_circle:before {
position: absolute;
content: "";
width: 93px;
height: 70px;
top: -110px;
left: 50%;
transform: translateX(-50%);
background: url(../img/title-bg.png) no-repeat center/contain;
z-index: 1
}

.mtitle_circle:after {
z-index: -1;
content: "";
width: 190px;
height: 190px;
border-radius: 95px;
background-color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin-left: auto;
margin-right: auto
}

.mtitle_circle.type-bg {
margin-top: 100px;
margin-bottom: 120px
}

.mtitle_circle.type-bg span {
display: block;
position: relative;
z-index: 2
}

.mtitle_circle.type-bg:before {
z-index: 2
}

.mtitle_circle.type-bg:after {
z-index: 1
}

.btn01 a {
background: #fefefe;
text-align: center;
width: 300px;
margin: 15px auto;
color: #412d26;
display: block;
padding: 8px 5px;
font-weight: 600;
border: 2px solid #02A1E6;
border-radius: 35px
}

.btn01 a:hover {
background: #02A1E6;
color: #fefefe
}

.btn01.mail {
flex-basis: 100%
}

.btn01.mail a {
background: #fcd917;
margin: 15px auto 25px
}

.btn01.mail a:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900;
margin-right: 5px
}

.btn01.left a {
margin: 15px 0
}

@media all and (max-width: 639px) {
.btn01 a {
width: 95%
}
}

.btn02 {
width: 300px;
margin: 20px auto 20px;
text-align: center
}

@media all and (max-width: 1100px) {
.btn02 {
width: 100%
}
}

.btn02.type-w100 {
width: 100%;
max-width: 600px
}

@media all and (max-width: 639px) {
.btn02.type-w100 {
width: 96%;
max-width: 300px
}
}

.btn02 a {
position: relative;
display: inline-block;
overflow: hidden;
padding: 15px 50px;
line-height: 24px;
letter-spacing: 0.1rem;
font-size: 1.6rem;
max-width: 400px;
text-align: center;
color: #02A1E6;
border: 1px solid #02A1E6;
border-radius: 10px
}

.btn02 a span {
position: relative;
display: block;
z-index: 2
}

.btn02 a:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #02A1E6;
animation: to-right 0.3s forwards
}

.btn02 a:hover {
color: #fff
}

.btn02 a:hover:before {
animation: from-left 0.3s forwards
}

@media all and (max-width: 639px) {
.btn02 {
width: 260px
}

.btn02 a {
font-size: 1.2rem
}
}

@keyframes from-left {
0% {
transform: translateX(-100%)
}

100% {
transform: translateX(0)
}
}

@keyframes to-right {
0% {
transform: translateX(0)
}

100% {
transform: translateX(100%)
}
}

.btn03 {
background: #fefefe;
text-align: center;
width: 300px;
margin: 15px auto;
color: #4d2c2b;
padding: 8px 5px;
font-weight: 600;
border: 2px solid #02A1E6;
border-radius: 35px;
overflow: hidden;
position: relative;
display: block;
transition: 0.2s
}

.btn03.t-20 {
margin-top: 20px;
margin-bottom: 0
}

@media all and (max-width: 639px) {
.btn03 {
width: 260px
}
}

.btn03 span {
position: relative
}

.btn03 .fas {
position: relative
}

.btn03::before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: "";
background-color: #7ba146;
border-radius: 50% 50% 0 0/100% 100% 0 0;
transition: transform 0.48s cubic-bezier(0.895, 0.03, 0.685, 0.22), border-radius 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) 40ms;
transform: scale(1, 0);
transform-origin: 50% 100%
}

.btn03:hover {
color: #fff
}

.btn03:hover::before {
background-color: #02A1E6;
border-radius: 50% 50% 0 0/0 0 0 0;
transition: transform 0.48s cubic-bezier(0.165, 0.84, 0.44, 1), border-radius 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) 20ms;
transform: scale(1, 1)
}

.btn03.type1 {
border: 2px solid #f38647
}

.btn03.type1:before {
background-color: rgba(243, 134, 71, 0.4)
}

.btn03.type1:hover::before {
background-color: #f38647
}

.btn03.type2 {
border: 2px solid #02A1E6
}

.btn03.type2:before {
background-color: rgba(2, 161, 230, 0.4)
}

.btn03.type2:hover::before {
background-color: #02A1E6
}

.btn03.type3 {
border: 2px solid #7ba146
}

.btn03.type3:before {
background-color: rgba(123, 161, 70, 0.4)
}

.btn03.type3:hover::before {
background-color: #7ba146
}

.btn03.type-all {
color: #fff;
border: 2px solid #02A1E6;
background-color: #02A1E6;
padding: 12px 5px
}

.btn03.type-all:before {
background-color: rgba(255, 255, 255, 0.4)
}

.btn03.type-all:hover::before {
background-color: rgba(255, 255, 255, 0.4)
}

.btn03.type-all:hover span {
z-index: 1;
position: relative
}

@media all and (max-width: 639px) {
.btn03.type-all {
margin: 0 auto
}
}

.news {
display: flex;
margin-top: 10px;
flex-wrap: wrap;
align-items: flex-start;
letter-spacing: 0;
line-height: 1.7
}

.news dt {
width: 7em;
padding: 3px 5px;
background: #f0f0f0;
text-align: center;
color: #412d26
}

.news dd {
padding: 5px;
background: #fff;
width: calc(100% - 8.5em);
margin-left: 8px
}

.news dt:not(:last-child),
.news dd:not(:last-child) {
margin-bottom: 7px
}

.news-bl {
overflow: hidden
}

.news-bl dt {
float: left;
width: 8em;
padding: 5px;
line-height: 1.3;
color: #02A1E6;
text-align: center;
border: 1px solid #02A1E6;
border-radius: 30px;
background: #fefefe;
font-size: 1.3rem
}

@media all and (max-width: 639px) {
.news-bl dt {
font-size: 1.2rem
}
}

.news-bl dd {
padding: 0 0 12px 9.2em;
line-height: 1.6;
border-bottom: 1px dotted #dddddd;
margin: 0 0 10px
}

.news-bl dd a {
color: #412d26;
background-image: linear-gradient(to right, #02A1E6, #76dd87);
padding-bottom: 0.25em;
background-position: 100% 100%;
background-size: 0% 1px;
background-repeat: no-repeat;
transition: background-size 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
font-weight: 600
}

.news-bl dd a:hover {
background-position: 0 100%;
background-size: 100% 1px
}

.news-bl dd:last-child {
margin: 0;
border-bottom: none
}

@media all and (max-width: 639px) {
.news-bl dt {
float: none
}

.news-bl dd {
padding: 8px 5px
}
}

.page-title {
margin: -30px auto 0;
position: relative;
z-index: 1;
background: url(../img/top01.jpg) no-repeat 50% 40%/cover;
background-position: top;
height: 380px;
width: 100%
}

@media all and (max-width: 896px) {
.page-title {
width: 100%;
border-radius: 0
}
}

@media all and (max-width: 639px) {
.page-title {
height: 250px
}
}

.page-title.normal {
height: 530px
}

.page-title.normal .inner {
padding: 0;
bottom: 32%
}

@media all and (max-width: 896px) {
.page-title.normal {
height: 330px
}

.page-title.normal .inner {
padding: 0;
bottom: 40%
}
}

@media all and (max-width: 639px) {
.page-title.normal {
height: 300px
}

.page-title.normal .inner {
padding: 0;
bottom: 32%
}
}

.page-title.type2 {
background: url(../img/page-title02.jpg) no-repeat 50% 40%/cover;
background-position: top;
padding-bottom: 0
}

.page-title.type3 {
background: url(../img/page-title03.jpg) no-repeat 50% 40%/cover;
background-position: top;
padding-bottom: 0
}

.page-title.type4 {
background: url(../img/page-title04.jpg) no-repeat 50% 40%/cover;
background-position: top;
padding-bottom: 0
}

.page-title.type5 {
background: url(../img/page-title05.jpg) no-repeat 50% 40%/cover;
background-position: top;
padding-bottom: 0
}

.page-title.type6 {
background: url(../img/page-title06.jpg) no-repeat 50% 40%/cover;
background-position: top;
padding-bottom: 0
}

.page-title.type7 {
background: url(../img/page-title07.jpg) no-repeat 50% 40%/cover;
background-position: top;
padding-bottom: 0
}

.page-title .inner {
margin: 0 auto;
position: absolute;
bottom: 40%;
right: 0;
left: 0;
text-align: center;
z-index: 200
}

@media all and (max-width: 896px) {
.page-title .inner {
right: 0;
left: 0
}
}

.page-title .inner .mtitle_gra {
position: relative
}

.page-title .inner.thaks-p {
right: 0
}

.page-title .page-lead {
text-align: center;
font-size: 4rem;
position: relative;
margin: 0 auto;
color: #ffffff;
text-shadow: 2px 2px #ff7d7d, 5px 5px rgba(109, 236, 253, 0.4)
}

@media all and (max-width: 639px) {
.page-title .page-lead {
font-size: 1.4rem;
transform: translateY(4px)
}

.page-title .page-lead .eng {
font-size: 2.8rem
}
}

@media all and (max-width: 896px) {
.page-title .inner {
bottom: 40%
}
}

@media all and (max-width: 639px) {
.page-title .inner {
bottom: 40%
}
}

.news-list li {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 4px 4px 8px;
border-bottom: 0.9px solid #ddd
}

.news-list li:not(:last-of-type) {
margin-bottom: 15px
}

.news-list li .data {
font-size: 1.4rem;
color: #fff;
background: #02A1E6;
padding: 4px 6px;
margin-left: 20px;
width: 120px;
text-align: center
}

@media all and (max-width: 639px) {
.news-list li .data {
font-size: 12px;
margin-left: 0px
}
}

.news-list li .txt {
flex: 1;
margin: 4px 0 0 20px;
padding: 0;
font-size: 1.6rem;
line-height: 1.4
}

.news-list li .txt a {
color: #412d26;
text-decoration: underline
}

.news-list li .txt a:hover {
opacity: 0.5
}

@media all and (max-width: 896px) {
.news-list li {
display: block
}

.news-list li .data {
display: inline-block;
font-size: 1.2rem;
padding: 4px;
margin-left: 0
}

.news-list li .txt {
margin: 5px 0 0;
display: block;
font-size: 1.2rem
}
}

.tbl-profile {
width: 100%
}

.tbl-profile th,
.tbl-profile td {
padding: 10px;
font-size: 1.4rem;
vertical-align: middle;
border-bottom: 1px solid #ddd
}

.tbl-profile th {
width: 25%;
text-align: left
}

.tbl {
width: 100%
}

.tbl th,
.tbl td {
padding: 15px;
vertical-align: middle;
border: 1px solid #aaa;
font-size: 1.4rem;
line-height: 1.5
}

.tbl th .small,
.tbl td .small {
font-weight: normal
}

.tbl th {
background: rgba(123, 161, 70, 0.2);
text-align: left
}

.tbl thead th {
background: #f2f4f5
}

.tbl .th-1 {
width: 45%
}

.tbl .th-2 {
background: rgba(21, 94, 190, 0.2)
}

.tbl .th-3 {
width: calc(80% / 3)
}

.tbl.type1 td {
text-align: left
}

@media all and (max-width: 639px) {
.tbl th {
text-align: left
}

.tbl th,
.tbl td {
padding: 10px;
font-size: 12px
}

.tbl th span,
.tbl td span {
font-size: 12px
}
}

.tbl_new {
border-top: 3px solid #155ebe;
width: 100%
}

.tbl_new tr th,
.tbl_new tr td {
vertical-align: middle;
padding: 15px 10px;
border-bottom: #02A1E6;
background: #fff
}

@media all and (max-width: 639px) {

.tbl_new tr th,
.tbl_new tr td {
font-size: 1.2rem
}
}

.tbl_new tr th {
font-weight: 600;
width: 22%;
color: #412d26;
text-align: left;
padding-left: 30px;
letter-spacing: 0
}

@media all and (max-width: 639px) {
.tbl_new tr th {
width: 20%;
padding-left: 20px;
font-size: 1.2rem
}
}

.tbl_new tr:nth-child(odd) th,
.tbl_new tr:nth-child(odd) td {
background: #f2f7ff
}

@media all and (max-width: 639px) {

.tbl_new tr:nth-child(odd) th,
.tbl_new tr:nth-child(odd) td {
font-size: 1.2rem
}
}

.tbl_new2 {
width: 100%
}

.tbl_new2 tr th,
.tbl_new2 tr td {
vertical-align: middle;
padding: 15px 10px;
border-bottom: #02A1E6
}

@media all and (max-width: 639px) {

.tbl_new2 tr th,
.tbl_new2 tr td {
font-size: 1.2rem
}
}

.tbl_new2 tr th {
font-weight: 600;
width: 15%;
color: #412d26;
text-align: left;
padding-left: 30px;
letter-spacing: 0
}

@media all and (max-width: 639px) {
.tbl_new2 tr th {
width: 20%;
font-size: 1.2rem
}
}

.tbl_new2 tr:nth-child(odd) th,
.tbl_new2 tr:nth-child(odd) td {
background: #ffe4d4
}

@media all and (max-width: 639px) {

.tbl_new2 tr:nth-child(odd) th,
.tbl_new2 tr:nth-child(odd) td {
font-size: 1.2rem
}
}

.tbl_new3 {
width: 100%
}

.tbl_new3 tr th,
.tbl_new3 tr td {
vertical-align: middle;
padding: 15px 10px;
border-bottom: #02A1E6
}

@media all and (max-width: 639px) {

.tbl_new3 tr th,
.tbl_new3 tr td {
font-size: 1.2rem
}
}

.tbl_new3 tr th {
font-weight: 600;
width: 15%;
color: #412d26;
text-align: left;
padding-left: 30px;
letter-spacing: 0
}

@media all and (max-width: 639px) {
.tbl_new3 tr th {
width: 20%;
font-size: 1.2rem
}
}

.tbl_new3 tr:nth-child(odd) th,
.tbl_new3 tr:nth-child(odd) td {
background: #f2f7ff
}

@media all and (max-width: 639px) {

.tbl_new3 tr:nth-child(odd) th,
.tbl_new3 tr:nth-child(odd) td {
font-size: 1.2rem
}
}

.tbl-border {
width: 100%
}

.tbl-border th,
.tbl-border td {
padding: 15px 10px;
border-bottom: 2px solid;
vertical-align: middle
}

@media all and (max-width: 639px) {

.tbl-border th,
.tbl-border td {
padding: 10px;
font-size: 1.2rem
}
}

.tbl-border th {
width: 25%;
color: #412d26;
text-align: left;
border-color: #f38647
}

.tbl-border th.th-1 {
width: 45%
}

@media all and (max-width: 639px) {
.tbl-border th {
width: 30%
}
}

.tbl-border .w13 {
width: 13%
}

.tbl-border td {
border-color: #aaa
}

.tbl-border2 {
width: 100%
}

.tbl-border2 th,
.tbl-border2 td {
padding: 15px 10px;
border-bottom: 2px solid;
vertical-align: middle
}

@media all and (max-width: 639px) {

.tbl-border2 th,
.tbl-border2 td {
padding: 10px;
font-size: 1.2rem
}
}

.tbl-border2 th {
width: 24%;
color: #412d26;
text-align: left;
border-color: #02A1E6
}

.tbl-border2 th.th-1 {
width: 45%
}

@media all and (max-width: 639px) {
.tbl-border2 th {
width: 50%
}
}

.tbl-border2 .w13 {
width: 13%
}

.tbl-border2 td {
border-color: #aaa
}

.tbl-box {
width: 100%
}

.tbl-box th,
.tbl-box td {
padding: 10px 10px;
vertical-align: middle;
border-bottom: 5px solid #fff
}

.tbl-box th:last-child,
.tbl-box td:last-child {
border-bottom: none
}

@media all and (max-width: 639px) {

.tbl-box th,
.tbl-box td {
padding: 10px;
font-size: 1.2rem
}
}

.tbl-box th {
width: 20%;
color: #412d26;
text-align: center;
background-color: #a3e2ff
}

.tbl-box th.th-1 {
width: 45%
}

@media all and (max-width: 639px) {
.tbl-box th {
width: 30%
}
}

.tbl-box .w13 {
width: 13%
}

.tbl-box td {
border-color: #aaa
}

.price {
font-weight: 600;
color: #fcd917;
font-size: 1.1em
}

@media all and (max-width: 639px) {
.price {
font-size: 1.4rem
}
}

.timetable {
padding: 20px 20px;
width: 100%;
border-top: 1px solid #412d26
}

.timetable th,
.timetable td {
border-bottom: 1px solid #412d26;
padding: 10px 5px;
text-align: center;
vertical-align: middle;
line-height: 1.4
}

.timetable th .txt,
.timetable td .txt {
letter-spacing: 0;
font-size: 12px
}

@media all and (max-width: 639px) {

.timetable th,
.timetable td {
font-size: 12px
}
}

.timetable .thead th {
border-top: 0;
color: #412d26;
background: rgba(255, 255, 255, 0.8)
}

.timetable .th-1 {
width: 35%;
font-weight: 600;
text-align: center
}

.timetable .circle {
color: #02A1E6
}

.timetable .triangle {
color: #412d26
}

@media all and (max-width: 639px) {
.timetable {
padding: 15px 10px
}

.timetable .th-1 {
width: 25%
}
}

.notion {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 15px;
background: #f2f4f5
}

.notion .triangle {
font-size: 2rem;
color: #412d26
}

.notion .notion-right {
flex: 1;
margin-left: 20px;
text-align: left
}

@media all and (max-width: 639px) {
.notion .notion-right {
font-size: 12px
}
}

.notion .notion-right span {
color: #412d26;
font-weight: bold;
background: #fcd917;
padding: 0 4px
}

.ggmap {
position: relative;
padding-bottom: 46.25%;
height: 0;
overflow: hidden
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}

.list_common li {
padding-bottom: 4px;
font-size: 1.4rem;
margin-bottom: 5px;
border-bottom: 1px dotted rgba(123, 161, 70, 0.5)
}

.list_common li:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none
}

.list_check.type1 {
display: flex;
flex-wrap: wrap
}

.list_check.type1 li {
background: #fefefe;
padding: 12px 8px;
width: 48%
}

.list_check.type1 li:nth-child(2n) {
margin-left: 4%
}

@media all and (max-width: 639px) {
.list_check.type1 li {
width: 95%;
margin: 0 auto 5px
}

.list_check.type1 li:nth-child(2n) {
margin-left: auto
}
}

.list_check li {
padding: 8px;
font-weight: 600;
background: #fefefe;
margin-bottom: 5px
}

.list_check li span {
font-weight: normal;
font-size: 0.9em;
display: block;
padding: 10px;
background: rgba(255, 252, 242, 0.2);
margin-top: 10px
}

.list_check li a {
color: #02A1E6;
border-bottom: 1px dotted #02A1E6
}

.list_check li:before {
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: 900;
margin-right: 10px;
color: #02A1E6
}

@media all and (max-width: 639px) {
.list_check li {
width: 98%;
margin: 0 auto 10px;
font-size: 1.3rem
}
}

.list_check2 li {
padding: 4px 8px;
font-weight: 600
}

.list_check2 li .num {
color: #02A1E6;
margin: 0 4px;
font-family: 'Fjalla One', sans-serif;
font-weight: 500
}

.list_check2 li:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
margin-right: 10px;
color: #02A1E6
}

.list_check2 li:not(:last-child) {
margin-bottom: 4px;
border-bottom: 1px dashed #eee
}

.list-inline2 {
text-align: center
}

.list-inline2 li {
display: inline-block;
padding: 4px 15px;
background: #fefefe;
border: 1px solid #412d26;
font-weight: 600;
border-radius: 30px
}

.list-inline2 li:not(:last-child) {
margin-right: 8px
}

.list-inline li {
display: inline-block;
padding: 3px
}

.list-inline li:not(:last-of-type):after {
content: "/";
margin: 0 5px;
color: #02A1E6;
font-weight: normal
}

@media all and (max-width: 639px) {
.list-inline li {
display: block;
padding: 0
}

.list-inline li:before {
content: "-";
color: #02A1E6
}

.list-inline li:not(:last-of-type):after {
display: none
}
}

.list_num li {
position: relative;
padding: 6px 4px 6px 50px;
font-size: 2rem;
font-family: "Nanum Gothic", "貂ｸ譏取悃 Medium", "Yu Mincho", "YakuHanMP", YuMincho, "Hiragino Mincho ProN", HGS譏取悃E, serif;
font-weight: 500;
margin-bottom: 5px;
color: #412d26
}

.list_num li span {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 3.5rem;
color: #412d26
}

@media all and (max-width: 639px) {
.list_num li {
font-size: 1.3rem
}

.list_num li span {
font-size: 2.8rem
}
}

.ol-list {
counter-reset: number;
list-style: none;
padding: 5px
}

.ol-list.type1 {
display: flex;
flex-wrap: wrap
}

.ol-list.type1>li {
width: 48%
}

.ol-list.type1>li:nth-child(2n) {
margin-left: 4%
}

.ol-list li {
line-height: 2;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
position: relative;
padding: 5px 5px 5px 30px
}

.ol-list li .ol-lead {
font-family: "Nanum Gothic", "貂ｸ譏取悃 Medium", "Yu Mincho", "YakuHanMP", YuMincho, "Hiragino Mincho ProN", HGS譏取悃E, serif;
font-weight: 500;
color: #015a81;
font-size: 2rem
}

.ol-list li .inner {
font-weight: normal;
display: block;
padding: 10px;
line-height: 1.6;
font-size: 1.4rem
}

.ol-list li:before {
counter-increment: number;
content: counter(number);
display: inline-block;
font-family: 'Fjalla One', sans-serif;
font-weight: 500;
left: 0;
top: 15px;
position: absolute;
font-size: 2.5rem;
color: #02A1E6;
margin-right: 10px;
line-height: 1
}

@media all and (max-width: 639px) {
.ol-list li {
font-size: 1.2rem
}

.ol-list li .ol-lead {
font-size: 1.4rem
}

.ol-list li .inner {
font-size: 0.9em
}

.ol-list li:before {
font-size: 1.8rem
}
}

.list_disc li {
padding: 5px 0
}

.list_disc li:not(:last-of-type) {
margin-bottom: 5px;
border-bottom: 1px dashed #ccc
}

.list_disc li:before {
content: "笳�";
margin-right: 5px;
color: #7ba146;
font-size: 0.7em
}

.list-btn {
display: flex;
flex-wrap: wrap
}

.list-btn li {
width: 32%;
margin: 0 calc(1.33% + (1.33% / 2)) 10px 0
}

.list-btn li a {
display: block;
background: #fffcf2;
color: #412d26;
font-weight: 600;
padding: 10px 3px;
text-align: center;
width: 100%;
height: 100%;
line-height: 1.5;
font-size: 1.5rem;
letter-spacing: 0
}

.list-btn li:nth-child(3n) {
margin-right: 0
}

@media all and (max-width: 639px) {
.list-btn li {
width: 90%;
margin: 0 auto 10px
}

.list-btn li a {
font-size: 1.2rem
}

.list-btn li:nth-child(3n) {
margin-right: auto
}
}

.list-btn.type1 {
max-width: 1000px;
margin: 0 auto 20px;
justify-content: center
}

.list-btn.type1 li a {
background: #02A1E6;
border: 1px solid #027eb3
}

.list-btn.type1 li a:hover {
background: #9fe7ab
}

.list-btn.type1 li a:before {
font-family: "Font Awesome 5 Free";
content: "\f13a";
font-weight: 900;
margin-right: 5px
}

#top-blog .pages {
display: none
}

#main .blog-wrap>li {
width: 30%
}

@media all and (max-width: 1100px) {
#main .blog-wrap>li {
width: 49%;
margin: 0 0.5% 20px 0.5%
}
}

#main .blog-wrap .data {
font-size: 1.4rem;
color: #fff;
background: #02A1E6;
padding: 4px 6px;
width: 120px;
text-align: center
}

.blog-wrap {
display: flex;
flex-wrap: wrap
}

.blog-wrap.type1 {
justify-content: inherit
}

.blog-wrap * {
transition: 0.3s
}

.blog-wrap>li {
width: 32%;
margin: 0 0.5% 20px 0.5%;
position: relative
}

@media all and (max-width: 896px) {
.blog-wrap>li {
width: 90%
}
}

.blog-wrap>li>a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10
}

.blog-wrap>li>a:hover~.blog-img img {
opacity: 1;
transform: scale(1.2)
}

.blog-wrap>li>a:hover .blog-txt {
opacity: 0.6
}

@media all and (max-width: 639px) {
.blog-wrap>li {
width: 90%;
margin: 0 auto 40px
}
}

.blog-img {
width: 100%;
height: 200px;
overflow: hidden;
box-sizing: border-box;
border-radius: 10px
}

@media all and (max-width: 896px) {
.blog-img {
height: 300px
}
}

@media all and (max-width: 639px) {
.blog-img {
height: 200px
}
}

.blog-img img {
height: 100%;
width: 100%;
object-fit: cover;
transition: all 0.4s ease;
font-family: "object-fit: cover;"
}

.blog-img:hover img {
opacity: 1 !important;
transform: scale(1.2)
}

.blog-detail {
padding-top: 10px
}

.blog-detail-upper {
position: relative;
z-index: 2;
margin: -31px 0 0;
color: #fff;
font-size: 12px
}

.blog-category {
display: inline-block;
padding: 5px;
line-height: 1.3;
text-align: center;
background: #111
}

.blog-date {
border-radius: 20px;
background: #02A1E6;
width: 100px;
padding: 5px;
line-height: 1.3;
text-align: center;
display: inline-block;
color: #fff;
font-size: 12px
}

.blog-date2 {
color: #016c9a;
font-size: 0.9em;
margin-bottom: 5px;
margin-right: 5px
}

.blog-date2:before {
font-family: "Font Awesome 5 Free";
content: "\f017";
font-weight: 900;
margin-right: 5px
}

.blog-title {
font-weight: 600;
line-height: 1.3;
margin: 10px 0
}

.blog-txt {
line-height: 1.5;
color: #412d26;
padding: 10px
}

@media all and (max-width: 639px) {
.blog-txt {
font-size: 12px
}
}

.pages {
text-align: center;
margin-top: 30px
}

.pages .page_next,
.pages .page_prev {
display: inline-block;
margin: 0 20px
}

.pages .page_next a,
.pages .page_prev a {
color: #fff;
padding: 4px 5px;
background: #155ebe;
font-size: 12px
}

.category_nav {
border: 1px solid #dddddd
}

.category_nav li a {
display: block;
padding: 15px;
border-bottom: 1px dotted #dddddd;
background-color: #ffffff
}

.category_nav li a:before {
font-family: "Font Awesome 5 Free";
content: "\f0a9";
font-weight: 900;
margin-right: 5px
}

.category_nav li a:hover {
background: #f2f4f5
}

.category_nav li:last-child a {
border-bottom: none
}

.cut {
overflow: hidden;
zoom: 1
}

.long {
letter-spacing: 0
}

.img-round {
border-radius: 15px 0 15px 0
}

.w300 {
width: 300px
}

.spbr {
display: none
}

.color1 {
color: #02A1E6
}

.color2 {
color: #412d26
}

.color3 {
color: #f38647
}

.relative {
position: relative
}

.txt1 {
font-weight: 600;
letter-spacing: 0.15em;
line-height: 2
}

.bigger {
font-size: 1.15em
}

.num {
font-weight: 600
}

.num a {
color: #02A1E6;
font-size: 2.8rem;
text-align: center;
margin-left: 5px
}

@media all and (max-width: 639px) {
.num a {
font-size: 2rem
}
}

.num a:before {
font-family: "Font Awesome 5 Free";
content: "\f879";
font-weight: 900;
margin-right: 5px
}

.num a:hover {
color: #02A1E6
}

.telbox {
max-width: 600px;
margin: 0 auto 20px;
padding: 20px;
background: #333;
text-align: center
}

.telbox .inner {
background: #fff;
padding: 10px
}

.txt-link {
font-weight: 600;
text-decoration: underline
}

.txt-link:hover {
text-decoration: none
}

.telbnr {
max-width: 700px;
margin: 20px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto
}

.telbnr li {
width: 48%;
border: 3px solid #02A1E6;
padding: 10px 10px;
text-align: center;
border-radius: 40px
}

.telbnr li a {
display: block;
font-size: 2.4rem;
font-weight: 600;
color: #02A1E6
}

.telbnr li a:before {
font-family: "Font Awesome 5 Free";
content: "\f879";
font-weight: 900;
margin-right: 5px
}

.telbnr li a:hover {
color: #02A1E6
}

.telbnr li:last-of-type {
margin-left: 4%
}

@media all and (max-width: 639px) {
.telbnr {
max-width: 90%
}

.telbnr li {
width: 100%;
margin: 0 auto 30px
}

.telbnr li:last-of-type {
margin-left: auto
}

.telbnr li a {
font-size: 2rem
}
}

.telbnr-ttl {
font-weight: 600;
font-size: 1.8rem;
color: #412d26;
margin-top: -30px
}

.telbnr-ttl span {
background: #fdd9df;
padding: 0 20px
}

@media all and (max-width: 639px) {
.telbnr-ttl {
font-size: 1.5rem
}
}

.breadcrumb {
position: absolute;
bottom: 0;
left: 30px;
max-width: 1200px;
margin: 20px auto 20px;
font-size: 1.2rem;
background: #155ebe;
border-radius: 50px;
padding: 12px 30px
}

.breadcrumb li {
display: inline;
color: #fff
}

.breadcrumb li a {
color: #fcd917
}

.breadcrumb li+li:before {
margin: 0 10px;
content: ">"
}

@media all and (max-width: 639px) {
.breadcrumb {
font-size: 12px;
left: 10px;
padding: 10px 20px
}
}

.form {
margin: 0 auto;
width: 100%
}

.form dl dt {
float: left;
width: 280px;
padding-top: 20px;
font-weight: 600
}
.form-contents form dl dt:not(.pattern-exclusion) {
float: left;
width: 280px;
padding-top: 20px;
margin-right: auto;
text-align: left;
}
.form dl dt span {
color: #fff;
background: #155ebe;
padding: 5px 8px;
margin-right: 5px;
font-size: 11px;
border-radius: 20px;
position: relative;
top: -2px
}
.form-contents form dl dt:not(.pattern-exclusion) span {
color: unset;
background: transparent;
padding: unset;
margin: unset;
font-size: unset;
border: unset;
position: unset;
}
.form dl dt span.nini {
background: #fcd917;
color: #412d26
}

.form dl dd {
padding-left: 280px;
padding-bottom: 20px;
padding-top: 23px;
line-height: 1.5;
border-bottom: 1px dotted #cccccc
}

.form dl dd.type1 p {
display: inline
}

.form dl dd.type1 .w20 {
width: 20%
}

@media all and (max-width: 896px) {
.form dl dd.type1 .w20 {
width: 30%
}
}

.form dl dd.type1 .w30 {
width: 30%
}

@media all and (max-width: 639px) {
.form dl dd.type1.type1-name .w30 {
width: 48%
}
}

.form dl dd.type1 .w60 {
width: 60%
}

.form dl dd:last-child {
border-bottom: none
}

.form .textarea,
.form textarea {
border: 0;
padding: 15px;
width: 100%;
border-radius: 0;
-webkit-appearance: none;
background: #f0f0f0
}

.form .textarea02 {
width: 20%;
margin-right: 5px;
border-radius: 0;
padding: 15px;
border: 0;
-webkit-appearance: none;
background: #f0f0f0;
position: relative
}

.form .textarea03 {
width: 12%;
margin-right: 5px;
border-radius: 0;
padding: 15px;
border: 0;
-webkit-appearance: none;
background: #f0f0f0;
position: relative
}

.form .select-wrap {
position: relative;
overflow: hidden;
display: inline-block;
min-width: 192px;
min-width: 12em;
background-color: #ffffff;
border: 1px solid #dddddd;
color: #333
}

.form .select-wrap select {
appearance: none;
position: relative;
z-index: 2;
display: block;
width: 200%;
width: -webkit-calc(100% + 5em);
margin: 0;
padding: 11px 35px 11px 11px;
padding: 0.6875rem 2.1875rem 0.6875rem 0.6875rem;
background: transparent;
border: 0;
outline: none;
line-height: 1.5
}

.form .entypo-down-open-mini:before {
font-family: "FontAwesome";
content: "\f0ab";
position: absolute;
z-index: 1;
top: 50%;
right: 12px;
right: 0.75rem;
margin-top: -8px;
margin-top: -0.5rem;
font-size: 16px;
font-size: 1rem;
line-height: 1;
color: #02A1E6
}

.form label.radio_text {
cursor: pointer;
position: relative;
margin-right: 20px;
overflow: hidden;
padding-left: 20px;
display: inline-block
}

.form label.radio_text:before {
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #ccc;
border-radius: 50%;
left: 0px;
top: 2px;
content: "";
z-index: 3
}

.form label.radio_text:after {
content: "";
position: absolute;
width: 11px;
height: 11px;
border-radius: 100%;
left: 2px;
top: 4px;
background-color: #02A1E6;
z-index: 1
}

.form label.radio_text input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
left: -23px;
top: 0px;
margin: 0px;
box-shadow: 20px -1px #fff
}

.form label.radio_text input[type="radio"]:checked {
box-shadow: none
}

.form label.radio_text input[type="radio"]:focus {
opacity: 0.2;
box-shadow: 20px -1px #eeebda
}

.form label.checkbox_text {
cursor: pointer;
position: relative;
padding-left: 25px;
margin: 0 20px 5px 0;
overflow: hidden;
display: inline-block
}

.form label.checkbox_text:before {
content: "";
position: absolute;
width: 18px;
height: 18px;
left: 0px;
top: 0;
border: 1px solid #ccc;
z-index: 3;
padding: 1px
}

.form label.checkbox_text:after {
content: "";
position: absolute;
top: 40%;
left: 5px;
display: block;
margin-top: -9px;
width: 8px;
height: 12px;
border-right: 3px solid #02A1E6;
border-bottom: 3px solid #02A1E6;
transform: rotate(45deg);
z-index: 1
}

@media all and (max-width: 639px) {
.form label.checkbox_text:after {
margin-top: -18px
}
}

.form label.checkbox_text input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
position: absolute;
left: -40px;
width: 20px;
height: 20px;
display: block;
box-shadow: 41px 0px #fff;
z-index: 2;
margin: 0px;
padding: 0px
}

.form label.checkbox_text input[type="checkbox"]:checked {
box-shadow: none
}

.form label.checkbox_text input[type="checkbox"]:checked:focus {
box-shadow: 40px 0px #666;
opacity: 0.1
}

.form label.checkbox_text input[type="checkbox"]:focus {
box-shadow: 41px 0px #eee
}

.form input[type="text"],
.form textarea {
font-size: 16px
}

@media all and (max-width: 639px) {

.form input[type="text"],
.form textarea {
transform: scale(0.9);
margin-left: -5px
}
}

.select_arrow {
position: relative;
display: inline-block
}

.select_arrow:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8.5px solid #e4775c;
content: "";
position: absolute;
right: 50px;
top: 20px;
width: 0
}

.fm-txt {
font-size: 1.4rem;
background: rgba(255, 255, 255, 0.5);
padding: 5px
}

.thanks {
padding: 40px;
border: 3px solid #02A1E6;
box-shadow: 0 0 0 8px rgba(2, 161, 230, 0.2);
max-width: 700px;
margin: 0 auto
}

@media all and (max-width: 639px) {
.thanks {
max-width: 90%;
padding: 30px 20px
}
}

.shadow {
box-shadow: 0 0 10px rgba(65, 45, 38, 0.05)
}

.policy {
padding: 30px;
background: #fbfbfb;
margin: 0 auto;
}

.mtitle_small {
font-weight: bold;
color: #412d26;
padding: 6px 0;
font-size: 2rem;
border-bottom: 1px solid #526c2f;
position:relative;
}
.mtitle_small::before{
    content: "◇";
margin-right: 5px;
color: #02A1E6;
}

.mtitle_small .case {
color: #02A1E6;
margin-right: 5px;
}
.mtitle_small span {
margin-left: 20px;
font-size: 1.3rem;
background: #f38647;
padding: 4px 20px;
color: #fff;
font-weight: normal;
border-radius: 5px;
position: relative;
}

@media all and (max-width: 639px) {
.mtitle_small span {
padding: 4px 20px;
font-size: 1.2rem;
}
}

.mtitle_small2 {
position: relative;
margin-bottom: 10px;
padding-left: 20px;
}

.mtitle_small2::before {
content: "";
background-color: #02A1E6;
width: 10px;
height: 4px;
position: absolute;
top: 0.6em;
left: 0
}

.mtitle_gra {
display: block;
font-size: 5rem;
color: transparent;
background-color: #fff;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(255, 255, 255, 0.2);
-webkit-background-clip: text
}

@media all and (max-width: 1367px) {
.mtitle_gra {
font-size: 4rem
}
}

@media all and (max-width: 1100px) {
.mtitle_gra {
font-size: 3rem
}
}

@media all and (max-width: 639px) {
.mtitle_gra {
font-size: 2rem
}
}

.thumb-item li {
width: 100%
}

.thumb-item-nav li {
overflow: hidden;
height: 100px
}

.thumb-item-nav li img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit: cover;"
}

@media all and (max-width: 639px) {
.thumb-item-nav li {
height: 80px
}
}

.gallery {
display: flex;
justify-content: flex-start;
flex-wrap: wrap
}

.gallery li {
width: 24%;
margin: 0 calc(1% + (1% / 3)) 25px 0
}

.gallery li:nth-child(4n) {
margin-right: 0
}

.gallery li a {
background: rgba(255, 252, 242, 0.2);
display: block;
text-align: center;
padding: 0px;
height: 200px
}

.gallery li a img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit: cover;"
}

.gallery li p {
font-size: 14px;
margin: 3px 0 10px
}

@media all and (max-width: 896px) {
.gallery li {
width: 48%;
margin: 0 1% 20px
}

.gallery li:nth-child(2n) {
margin-right: 0
}

.gallery li a {
height: 120px
}

.gallery li p {
font-size: 12px
}
}

.list2 {
display: flex;
flex-wrap: wrap;
max-width: 1500px;
margin-right: auto;
margin-left: auto
}

.list2.top-info .child {
position: relative;
color: #412d26;
font-weight: 600
}

.list2.top-info .child:last-child {
margin-top: 100px
}

.list2.top-info .top-info-txt {
position: relative;
z-index: 3;
margin-top: -40px;
padding: 20px
}

.list2.type1>li,
.list2.type1 .child {
background: #fefefe;
padding: 20px
}

.list2>li,
.list2 .child {
width: 48%;
margin-bottom: 30px
}

.list2>li.map,
.list2 .child.map {
margin-top: 20px
}

.list2>li:nth-child(2n),
.list2 .child:nth-child(2n) {
margin-left: 4%
}

@media all and (max-width: 639px) {

.list2>li:nth-child(2n),
.list2 .child:nth-child(2n) {
margin-left: auto
}
}

@media all and (max-width: 639px) {

.list2>li,
.list2 .child {
width: 100%;
margin: 20px auto 0
}
}

.list3 {
display: flex;
flex-wrap: wrap
}

.list3.type1 {
margin: 30px 25px
}

.list3.type1>li {
padding: 20px 10px;
background: #fff;
border-radius: 15px;
box-shadow: 3px 3px 0 rgba(123, 161, 70, 0.6)
}

.list3.type2 {
margin: 30px 25px
}

.list3.type2>li {
padding: 10px;
background: #fff;
border-radius: 15px;
box-shadow: 3px 3px 0 rgba(123, 161, 70, 0.6)
}

@media all and (max-width: 639px) {
.list3.type2 li {
margin-bottom: 60px
}
}

.list3 li {
width: 31%;
position: relative;
margin: 0 calc(2.33% + (2.33% / 2)) 30px 0
}

.list3 li:nth-child(3n) {
margin-right: 0
}

@media all and (max-width: 639px) {
.list3 li {
width: 95%;
margin: 0 auto 30px
}

.list3 li:nth-child(3n) {
margin-right: auto
}
}

.list4 {
display: flex;
flex-wrap: wrap;
margin-left: -2%;
margin-top: -30px
}

.list4.type1 {
max-width: 900px;
margin-right: auto;
margin-left: auto;
justify-content: center
}

.list4.type1 li {
padding: 15px;
background: rgba(21, 94, 190, 0.2);
border-radius: 10px;
display: block;
transition: all 0.2s ease-in
}

.list4.type1 li a {
display: block
}

.list4.type1 li a:hover {
position: relative;
transform: translate(0, 10px)
}

.list4.type1 li img {
width: 60px;
margin: 0 auto 10px
}

@media all and (max-width: 639px) {
.list4.type1>li {
width: 48%
}

.list4.type1>li img {
width: 50px
}
}

.list4.mt0 {
margin-top: 20px;
margin-left: auto
}

.list4.mt0 li {
margin-top: 0
}

.list4 li {
margin-left: 2%;
margin-top: 30px;
width: 23%
}

@media all and (max-width: 1100px) {
.list4 li {
width: 31.33%
}
}

@media all and (max-width: 639px) {
.list4 {
margin-left: auto
}

.list4 li {
width: 90%;
margin: 25px auto 0
}
}

.prv dt {
color: #02A1E6;
border-bottom: 1px solid #ccc;
margin: 10px 0
}

#works:before {
content: "";
height: 80px;
margin-top: -80px;
display: block;
visibility: hidden
}

.note {
padding: 20px;
margin-top: 10px;
background: url(../img/body_bg.png);
border-radius: 15px;
border: 1px solid #7ba146
}

.flow-dl {
display: flex;
flex-wrap: wrap;
align-items: flex-start
}

.flow-dl dt {
color: #7ba146;
width: 60px;
text-align: center;
margin-right: 20px;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
padding-top: 8px
}

.flow-dl dt span {
font-size: 4rem;
display: block;
color: #02A1E6;
font-weight: 400
}

.flow-dl dd {
width: calc(100% - 80px);
margin-bottom: 40px;
border-bottom: 1px dashed #02A1E6;
padding-bottom: 25px
}

.flow-dl dt:not(:last-child),
.flow-dl dd:not(:last-child) {
margin-bottom: 20px
}

@media all and (max-width: 639px) {
.flow-dl dt {
font-size: 1.3rem
}

.flow-dl dt span {
font-size: 2.2rem
}
}

.txt1 {
padding-left: 10px
}

.blog-month {
margin-bottom: 10px
}

.blog-month ul {
display: flex;
flex-wrap: wrap
}

.blog-month ul li {
width: 49%;
color: #fff;
font-size: 12px;
padding: 5px 0;
margin-bottom: 5px;
text-align: center;
letter-spacing: 0;
background: #02a0e5
}

.blog-month ul li:nth-child(2n) {
margin-left: 2%
}

.blog-month ul li a {
color: #fff;
font-size: 12px
}

#a01,
#a02,
#a03,
#a04,
#a05,
#a06,
#a07,
#a08 {
display: block;
padding-top: 100px;
margin-top: -100px
}

.list-center {
display: flex;
flex-wrap: wrap;
justify-content: center
}

.list-center li {
width: 50%
}

@media all and (max-width: 639px) {
.list-center {
flex-direction: column
}

.list-center li {
width: 100%
}
}

.faq-dl.type1 .faq-inner {
padding: 25px;
background: #fff;
border-radius: 20px;
border-bottom: 3px solid #eee
}

@media all and (max-width: 639px) {
.faq-dl.type1 .faq-inner {
padding: 15px
}
}

.faq-dl.type1 dt {
cursor: pointer
}

.faq-dl.type1 dd {
display: none
}

.faq-dl .faq-inner {
padding: 10px;
margin-bottom: 20px
}

.faq-dl .faq-inner:not(:last-of-type) {
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 3px solid #eee
}

.faq-dl .faq-inner dt,
.faq-dl .faq-inner dd {
position: relative;
padding: 10px 10px 10px 55px;
font-weight: 600
}

.faq-dl .faq-inner dt:before,
.faq-dl .faq-inner dd:before {
position: absolute;
content: "";
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
left: 0;
top: 0;
font-family: "Ubuntu", sans-serif;
font-weight: 600
}

.faq-dl .faq-inner dt {
margin-bottom: 10px;
color: #412d26
}

.faq-dl .faq-inner dt:before {
content: "Q";
color: #02A1E6;
font-size: 3rem;
background: rgba(2, 161, 230, 0.2)
}

.faq-dl .faq-inner dd:before {
content: "A";
color: #f38647;
font-size: 3rem;
background: rgba(252, 217, 23, 0.5)
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 30px !important;
right: auto;
background: rgba(2, 161, 230, 0.7)
}

@media all and (max-width: 639px) {

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 10px !important
}
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 30px !important;
left: auto;
background: rgba(2, 161, 230, 0.7)
}

@media all and (max-width: 639px) {

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 10px !important
}
}

@media all and (max-width: 639px) {

.swiper-button-next,
.swiper-button-prev {
width: 17px !important;
height: 28px !important;
background-size: 17px 28px !important
}
}

.point-num {
position: relative;
z-index: 2;
width: 60px;
height: 60px;
background: #7ba146;
color: #222;
font-family: "Ubuntu", sans-serif;
font-weight: 600;
font-size: 3.5rem;
border-radius: 100%;
text-align: center;
margin: 0 auto -20px;
line-height: 60px;
box-shadow: 0 0 0 4px rgba(254, 254, 254, 0.6)
}

.sns-list {
display: flex
}

.sns-list.center {
justify-content: center;
margin: 15px 0
}

.sns-list li a {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 15px;
color: #e75555;
display: block;
background: #fefefe;
border-radius: 100%;
text-align: center;
transition: all 0.2s ease-in;
position: relative
}

.sns-list li a:hover {
opacity: 0.7
}

.sns-list li a.btn-facebook {
background: #1877f2
}

.sns-list li a.btn-twitter {
background: #1da1f2
}

.sns-list li a.btn-instagram {
overflow: hidden;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat
}

.sns-list li a.btn-instagram i {
position: relative;
z-index: 2
}

.sns-list li a.btn-instagram:before {
content: "";
position: absolute;
top: 18px;
left: -10px;
width: 50px;
height: 50px;
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%)
}

.sns-list li:not(:last-child) {
margin-right: 10px
}

@media all and (max-width: 896px) {
.sns-list li:not(:last-child) {
margin-right: 5px;
margin-bottom: 0
}
}

.greet-box {
position: relative
}

.greet-box-photo {
position: relative
}

.greet-box-photo img {
border-radius: 40px
}

@media all and (max-width: 1100px) {
.greet-box-photo {
margin: 0 auto;
text-align: center
}
}

@media all and (max-width: 896px) {
.greet-box-photo img {
border-radius: 20px
}
}

.greet-box-photo .tree-deko {
z-index: 10;
position: absolute;
bottom: -70px;
right: 120px;
width: 100%;
max-width: 200px
}

.greet-box-photo .tree-deko img {
width: 100%
}

@media all and (max-width: 1100px) {
.greet-box-photo .tree-deko {
right: 10px
}
}

@media all and (max-width: 639px) {
.greet-box-photo .tree-deko {
right: -30px;
max-width: 120px
}
}

.greet-box-txt {
background-color: #fff;
border-radius: 0 40px 40px 0;
padding: 40px;
margin-bottom: 30px
}

@media all and (max-width: 896px) {
.greet-box-txt {
border-radius: 20px
}
}

@media all and (max-width: 896px) {
.greet-ttl {
width: 80%;
margin: 0 auto;
text-align: center
}
}

@media all and (max-width: 639px) {
.greet-ttl {
width: 100%
}
}

.vertical-content {
margin: 0 auto;
position: relative;
width: 50%;
z-index: 10
}

.vertical-content.type1 {
margin-left: 180px
}

@media all and (max-width: 639px) {
.vertical-content.type1 {
margin-left: 0
}
}

@media all and (max-width: 896px) {
.vertical-content {
width: 100%
}
}

.box1 {
padding: 40px;
margin: 0 auto 80px;
max-width: 850px
}

@media all and (max-width: 639px) {
.box1 {
padding: 25px
}
}

.box2 {
padding: 30px 15px;
background: #fff;
position: relative;
z-index: 2
}

@media all and (max-width: 639px) {
.box2 {
padding: 20px
}
}

.arrow2 {
position: relative
}

.arrow2::before {
content: "";
display: block;
position: absolute;
left: 50%;
width: 0;
height: 0;
bottom: -44%;
transform: translateX(-50%);
border: 12px solid transparent;
border-top: 12px solid #6fca54;
border-bottom-width: 0
}

@media all and (max-width: 639px) {
.arrow2::before {
bottom: -49%
}
}

.flow-list {
position: relative
}

.flow-list.type1 li {
align-items: flex-start
}

.flow-list.type1 li .flow-title {
margin-bottom: 10px
}

.flow-list.type-flex {
width: 50%
}

@media all and (max-width: 639px) {
.flow-list.type-flex {
width: 100%
}
}

.flow-list li {
width: 90%;
margin: 0 auto 40px;
align-items: center;
padding: 15px 0;
background: #fefefe;
border-radius: 31px;
font-weight: bold;
height: 62px;
max-width: 500px;
text-align: center;
border: 2px solid #bff19d
}

@media all and (max-width: 639px) {
.flow-list li {
width: 90%;
margin: 0 auto 40px
}
}

.flow-list li .txt {
flex: 1;
margin-left: 35px
}

.flow-list li .flow-title {
color: #02A1E6;
border-bottom: 1px dashed #02A1E6;
padding-bottom: 4px;
font-weight: 600;
font-size: 1.8rem;
letter-spacing: 0.2rem
}

@media all and (max-width: 639px) {
.flow-list li {
flex-direction: column
}

.flow-list li .flow-num {
font-size: 2.2rem;
text-align: center
}

.flow-list li .flow-title {
font-size: 1.3rem
}

.flow-list li .txt {
margin: 20px auto 0
}
}

.flow-box {
position: relative;
width: 100%
}

.flow-box .photo {
object-fit: cover
}

.flow-box .photo img {
width: 100%
}

.flow-box .num {
position: absolute;
font-family: 'Fjalla One', sans-serif;
font-weight: 500;
color: #02A1E6;
font-size: 5rem;
right: 30px;
top: -40px
}

@media all and (max-width: 639px) {
.flow-box .num {
left: 40px;
text-align: left;
font-size: 5rem
}
}

.flow-box:after {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: -50px;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
border-style: solid;
border-width: 25px 25px 0 25px;
border-color: #007bff transparent transparent transparent
}

.flow-box:last-child:after {
display: none
}

.price-dl dt {
background: #fff6d9;
padding: 14px 20px;
font-family: "Nanum Gothic", "貂ｸ譏取悃 Medium", "Yu Mincho", "YakuHanMP", YuMincho, "Hiragino Mincho ProN", HGS譏取悃E, serif;
font-weight: 500;
color: #412d26;
border-top: 1px solid #7ba146;
border-bottom: 1px solid #7ba146
}

.price-dl dd {
padding: 20px;
margin-bottom: 25px
}

.kiritori {
height: 1px;
border-top: 1px dashed #02A1E6;
margin: 30px auto;
display: block;
max-width: 90%
}

.interview-head {
display: flex;
flex-wrap: wrap;
align-items: center
}

.interview-head .interview-lead {
font-family: "Nanum Gothic", "貂ｸ譏取悃 Medium", "Yu Mincho", "YakuHanMP", YuMincho, "Hiragino Mincho ProN", HGS譏取悃E, serif;
font-weight: 500;
font-size: 1.7rem;
letter-spacing: 2;
flex: 1;
margin-right: 30px
}

.interview-head .interview-btn {
cursor: pointer;
width: 220px;
padding: 15px 8px;
text-align: center;
background: #fcd917;
color: #412d26;
font-weight: 600;
position: relative;
transition: all 0.2s ease-in
}

.interview-head .interview-btn:before {
font-family: "Font Awesome 5 Free";
content: "\f107";
font-weight: 900;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
transition: all 0.2s ease-in
}

.interview-head .interview-btn:hover {
background: #015a81;
color: #fff
}

@media all and (max-width: 639px) {
.interview-head {
flex-direction: column;
width: 90%;
margin: 0 auto
}

.interview-head .interview-lead {
flex: 0 1 auto;
margin: 0 0 15px;
font-size: 1.3rem
}

.interview-head .interview-btn {
width: 100%
}
}

.interview-box {
background: #fffcf2;
letter-spacing: 0;
padding: 30px;
display: none
}

@media all and (max-width: 639px) {
.interview-box {
padding: 15px 15px
}
}

.course-list li .upper {
padding: 15px;
background: rgba(123, 161, 70, 0.2)
}

.course-list li .lower {
padding: 15px;
background: #fffcf2
}

.course-list li:not(:last-of-type) {
margin-bottom: 20px
}

.column2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center
}

.column2 .child {
width: 48%
}

@media all and (max-width: 639px) {
.column2 {
flex-direction: column
}

.column2 .child {
width: 100%
}

.column2 .child.column2-img {
order: -1;
margin-bottom: 30px
}
}

.flex {
display: flex;
flex-wrap: wrap
}

@media all and (max-width: 639px) {
.flex.all {
display: flex;
flex-wrap: wrap
}
}

.flex.all .flex-15 {
width: 15%
}

@media all and (max-width: 639px) {
.flex.all .flex-15 {
width: 15%
}
}

.flex.all .flex-85 {
width: 85%
}

@media all and (max-width: 639px) {
.flex.all .flex-85 {
width: 82%;
margin-left: 3%
}
}

@media all and (max-width: 1100px) {
.flex.flex-pro {
display: block
}

.flex.flex-pro .flex-20 {
width: 90%;
margin: 0 auto
}

.flex.flex-pro .flex-78 {
width: 100%;
margin: 130px auto 0
}

.flex.flex-pro .flex-40 {
width: 40%
}
}

@media all and (max-width: 1100px) and (max-width: 639px) {
.flex.flex-pro .flex-40 {
width: 100%
}
}

@media all and (max-width: 639px) {
.flex {
display: block
}
}

@media all and (max-width: 1100px) {
.flex.order {
display: flex
}

.flex.order .order1 {
order: 1
}

.flex.order .order1.t-m40 {
margin-top: 40px
}

.flex.order .order2 {
order: 2
}
}

.flex.w-100 {
width: 100%
}

.flex.j-center {
justify-content: center
}

.flex.j-start {
justify-content: start
}

.flex.j-end {
justify-content: end
}

.flex.a-center {
align-items: center
}

.flex.a-first {
flex-wrap: inherit;
align-items: flex-start
}

.flex .flex-15 {
width: 15%
}

@media all and (max-width: 639px) {
.flex .flex-15 {
width: 90%;
margin: 0 auto
}
}

.flex .flex-20 {
width: 20%
}

@media all and (max-width: 639px) {
.flex .flex-20 {
width: 90%;
margin: 0 auto
}
}

.flex .flex-20.type-l {
margin-left: 2%
}

@media all and (max-width: 639px) {
.flex .flex-20.type-l {
margin-left: auto
}
}

.flex .flex-30 {
width: 30%
}

@media all and (max-width: 639px) {
.flex .flex-30 {
width: 90%;
margin: 0 auto
}
}

.flex .flex-30.type-l {
margin-left: 2%
}

@media all and (max-width: 639px) {
.flex .flex-30.type-l {
margin-left: auto
}
}

.flex .flex-36 {
width: 36%
}

@media all and (max-width: 639px) {
.flex .flex-36 {
width: 90%;
margin: 0 auto
}
}

.flex .flex-40 {
width: 40%
}

@media all and (max-width: 1100px) {
.flex .flex-40 {
width: 60%
}
}

@media all and (max-width: 639px) {
.flex .flex-40 {
width: 90%;
margin-left: auto;
margin-right: auto
}
}

.flex .flex-48 {
width: 48%;
margin-left: 4%
}

.flex .flex-48:first-child {
margin-left: auto;
margin-right: auto
}

@media all and (max-width: 1100px) {
.flex .flex-48 {
width: 100%;
margin-left: 20px;
margin-right: 20px
}

.flex .flex-48:first-child {
margin-bottom: 20px
}
}

@media all and (max-width: 639px) {
.flex .flex-48 {
width: 90%;
margin-left: auto;
margin-right: auto
}

.flex .flex-48:first-child {
margin-left: auto
}
}

.flex .flex-56 {
width: 56%;
margin-left: 2%
}

@media all and (max-width: 639px) {
.flex .flex-56 {
width: 100%
}
}

.flex .flex-58 {
width: 58%;
margin-left: 2%
}

@media all and (max-width: 639px) {
.flex .flex-58 {
width: 100%;
margin-left: auto;
margin-right: auto
}
}

.flex .flex-68 {
width: 68%;
margin-left: 2%
}

@media all and (max-width: 639px) {
.flex .flex-68 {
width: 100%;
margin-left: auto
}
}

.flex .flex-68.type-l {
margin-left: auto
}

.flex .flex-70 {
width: 70%;
margin-left: 2%
}

@media all and (max-width: 639px) {
.flex .flex-70 {
margin-left: auto;
margin-right: auto;
width: 100%
}
}

.flex .flex-78 {
width: 78%;
margin-left: 2%
}

@media all and (max-width: 639px) {
.flex .flex-78 {
width: 100%
}
}

.flex .flex-78.type-l {
margin-left: auto
}

.flex .flex-85 {
width: 85%
}

@media all and (max-width: 639px) {
.flex .flex-85 {
width: 100%
}
}

.photo-deko {
filter: grayscale(4%) drop-shadow(10px 10px 0px rgba(56, 161, 47, 0.6))
}

.photo-deko.min {
filter: grayscale(4%) drop-shadow(7px 7px 0px rgba(73, 142, 231, 0.6))
}

.photo-deko2 {
border-top: 4px solid #02A1E6;
border-bottom: 4px solid #02A1E6
}

.recruit-box .txtbox {
margin-top: 20px
}

@media all and (max-width: 639px) {
.recruit-box .txtbox {
margin-top: 110px
}
}

.recruit-box .txtbox .mtitle {
margin-bottom: 30px
}

.recruit-box .txtbox .btn03 {
margin-top: 20px
}

.line-deko {
position: relative
}

.line-deko::before {
position: absolute;
content: "";
width: 300px;
height: 4px;
top: -20px;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(2, 161, 230, 0.5)
}

.businesslist li {
position: relative;
margin-bottom: 50px
}

.businesslist li .inner {
position: relative;
margin-top: -70px
}

.businesslist li .inner .ttl {
display: inline-block;
background: #76dd87;
color: #fff;
padding: 10px 30px;
margin-bottom: 40px
}

.content-list {
margin-top: 40px;
justify-content: center
}

.content-list li {
background-color: #fff;
border-radius: 20px;
padding: 30px 20px
}

@media all and (max-width: 896px) {
.content-list li {
width: 40%;
margin: 0 2% 30px
}

.content-list li:nth-child(3n) {
margin: 0 2%
}
}

@media all and (max-width: 639px) {
.content-list li {
width: 95%;
margin: 0 auto 30px
}

.content-list li:nth-child(3n) {
margin: 0 auto 30px
}
}

@media all and (max-width: 1100px) {
.content-list .btn03 {
width: 100%;
max-width: 300px
}
}

.content-list .num {
margin: 0 auto;
text-align: center
}

.content-list .num span {
font-size: 5rem;
line-height: 100%;
color: #ffd2c7;
display: inline-block;
margin-left: 5px;
text-shadow: 1px 1px 0 #502000, -1px -1px 0 #502000, -1px 1px 0 #502000, 1px -1px 0 #502000, 0 1px 0 #502000,
-1px 0 #502000, -1px 0 0 #502000, 1px 0 0 #502000
}

@media all and (max-width: 639px) {
.content-list .num span {
font-size: 2.5rem
}
}

.content-list .num.type2 span {
color: #c7ffc7;
text-shadow: 1px 1px 0 #005800, -1px -1px 0 #005800, -1px 1px 0 #005800, 1px -1px 0 #005800,
0 1px 0 #005800, -1px 0 #005800, -1px 0 0 #005800, 1px 0 0 #005800
}

.content-list .num.type3 span {
color: #c7dcff;
text-shadow: 1px 1px 0 #0b1a6d, -1px -1px 0 #0b1a6d, -1px 1px 0 #0b1a6d, 1px -1px 0 #0b1a6d,
0 1px 0 #0b1a6d, -1px 0 #0b1a6d, -1px 0 0 #0b1a6d, 1px 0 0 #0b1a6d
}

.content-list .num.type4 span {
color: #ffc7ff;
text-shadow: 1px 1px 0 #650b6d, -1px -1px 0 #650b6d, -1px 1px 0 #650b6d, 1px -1px 0 #650b6d,
0 1px 0 #650b6d, -1px 0 #650b6d, -1px 0 0 #650b6d, 1px 0 0 #650b6d
}

.content-list .num.type5 span {
color: #ffc7da;
text-shadow: 1px 1px 0 #86153a, -1px -1px 0 #86153a, -1px 1px 0 #86153a, 1px -1px 0 #86153a,
0 1px 0 #86153a, -1px 0 #86153a, -1px 0 0 #86153a, 1px 0 0 #86153a
}

.content-list figure {
margin: 0 auto;
text-align: center
}

.attentionbox .ttl {
color: #fff;
font-size: 2rem
}

.ttl-deko {
margin-left: auto;
margin-right: auto;
text-align: center;
background: url(../img/flower-line.png) repeat-x;
width: 40%;
height: 50px;
background-size: contain;
text-align: center
}

.ttl-deko .ttl {
font-size: 2rem;
color: #fff;
font-weight: bold;
position: relative
}

.ttl-deko .ttl.black {
color: #2a2a2a
}

.hukidashi-deko {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-bottom: 50px
}

@media all and (max-width: 639px) {
.hukidashi-deko {
margin-top: 0
}
}

.hukidashi-deko span {
position: relative;
padding: 0 45px
}

@media all and (max-width: 639px) {
.hukidashi-deko span {
padding: 0px
}
}

.hukidashi-deko span:before {
position: absolute;
content: "";
width: 24px;
height: 40px
}

.hukidashi-deko span:before {
position: absolute;
content: "";
width: 24px;
height: 40px;
left: 0;
background: url(../img/left-huki.png) no-repeat
}

@media all and (max-width: 639px) {
.hukidashi-deko span:before {
top: 10px;
left: -50px
}
}

.hukidashi-deko span:after {
position: absolute;
content: "";
width: 23px;
height: 40px;
right: 0;
background: url(../img/right-huki.png) no-repeat
}

@media all and (max-width: 639px) {
.hukidashi-deko span:after {
top: 10px;
right: -70px
}
}

.deko1 {
position: relative
}

.deko1::before {
position: absolute;
content: "";
width: 300px;
height: 200px;
background: url(../img/deko-bottom.png) no-repeat;
background-size: contain;
bottom: 90px;
left: 16%
}

@media all and (max-width: 1367px) {
.deko1::before {
bottom: 30px;
left: 4%
}
}

@media all and (max-width: 1100px) {
.deko1 {
padding-bottom: 100px
}

.deko1::before {
bottom: 10px;
left: 4%;
width: 300px;
height: 200px
}
}

@media all and (max-width: 896px) {
.deko1 {
padding-bottom: 100px
}

.deko1::before {
bottom: -20px;
left: 4%
}
}

@media all and (max-width: 639px) {
.deko1 {
padding-bottom: 100px
}

.deko1::before {
width: 240px;
height: 150px;
bottom: 10px;
left: 4%
}
}

.deko2 {
position: relative
}

.deko2::before {
position: absolute;
content: "";
width: 900px;
height: 120px;
background: url(../img/deko-line.png) no-repeat center;
background-size: contain;
bottom: 40px;
left: 0;
right: 0;
margin: 0 auto
}

.txtdeko {
padding: 6px 15px;
color: #fff;
background: #155ebe;
margin-right: 5px;
border-radius: 10px
}

.txtdeko1 {
padding: 6px 15px;
color: #fff;
background: #02A1E6;
margin-right: 5px;
border-radius: 10px
}

@media all and (max-width: 639px) {
.txtdeko1 {
display: block;
width: 96%
}
}

.txtdeko-2 {
padding: 4px 7px;
color: #fff;
background: #02A1E6;
margin-right: 5px;
border-radius: 50%;
font-size: 1.1rem
}

.txtdeko2 {
color: #02A1E6;
font-weight: bold;
font-size: 2rem
}

.txtdeko3 {
color: #02A1E6;
font-weight: bold;
font-size: 1.6rem;
padding-right: 5px
}

.txtdeko4 {
font-weight: bold;
font-size: 2rem;
padding: 0 10px;
background: linear-gradient(transparent 50%, #84c3f6 20%)
}

@media all and (max-width: 639px) {
.txtdeko4 {
font-size: 1.6rem
}
}

.txtdeko4-2 {
font-weight: bold;
font-size: 1.7rem;
padding: 0 10px;
background: linear-gradient(transparent 50%, #cae7ff 20%)
}

@media all and (max-width: 639px) {
.txtdeko4-2 {
font-size: 1.5rem
}
}

.txtdeko-icon {
position: relative
}

.txtdeko-icon:before {
position: absolute;
content: "";
background: url(../img/txt-deko-icon01.png) no-repeat;
width: 74px;
height: 68px;
background-size: contain;
right: -90px;
bottom: -50px
}

@media all and (max-width: 639px) {
.txtdeko-icon:before {
width: 50px;
height: 60px;
right: -60px;
bottom: -40px
}
}

.txtbox {
position: relative;
padding: 2px 10px;
border-bottom: 5px solid rgba(51, 51, 51, 0.2);
color: #155ebe;
font-weight: bold;
font-size: 2rem
}

@media all and (max-width: 639px) {
.txtbox {
font-size: 1.6rem
}
}

.txtbox2 {
position: relative;
padding: 2px 10px;
border-bottom: 5px solid rgba(2, 161, 230, 0.2);
color: #7ba146;
font-weight: bold;
font-size: 1.8rem;
padding-left: 40px
}

@media all and (max-width: 639px) {
.txtbox2 {
font-size: 1.5rem
}
}

.txtbox2:before {
position: absolute;
content: "";
background: url(../img/sub-title-bg.png) no-repeat;
width: 29px;
height: 23px;
left: 4px;
top: 6px
}

.txtline {
position: relative;
padding-left: 40px
}

.txtline:before {
position: absolute;
content: "";
width: 16px;
height: 5px;
background: #7ba146;
left: 5px;
top: 10px
}

.txtline:after {
position: absolute;
content: "";
width: 16px;
height: 2px;
background: #02A1E6;
left: 5px;
top: 10px
}

.tag-txt {
padding-left: 27px;
position: relative
}

.tag-txt:before {
position: absolute;
content: "笳�";
color: #7ba146;
left: 5px
}

.page-txtbox {
max-width: 940px;
padding: 0 40px;
margin-left: auto;
margin-right: auto
}

@media all and (max-width: 639px) {
.page-txtbox {
padding: 0
}
}

.arrow_box {
margin-left: auto;
margin-right: auto;
position: relative;
width: 95%;
max-width: 300px;
height: 50px;
background: #155ebe;
text-align: center;
padding: 5px 0;
border: 5px solid #155ebe;
color: #ffffff;
font-size: 1.5rem;
font-weight: bold;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px
}

.arrow_box:after,
.arrow_box:before {
border: solid transparent;
content: "";
height: 0;
width: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 50%
}

.arrow_box:after {
border-color: rgba(21, 94, 190, 0);
border-top-width: 20px;
border-bottom-width: 20px;
border-left-width: 15px;
border-right-width: 15px;
margin-left: -15px;
border-top-color: #155ebe
}

.arrow_box:before {
border-color: rgba(21, 94, 190, 0);
border-top-width: 26px;
border-bottom-width: 26px;
border-left-width: 20px;
border-right-width: 20px;
margin-left: -20px;
margin-top: 5px;
border-top-color: #155ebe
}

.snsbox .sns-banner {
margin: 0 auto;
text-align: center
}

@media all and (max-width: 639px) {
.snsbox .sns-banner {
padding: 0 20px
}
}

.snsbox .sns-banner a {
display: block;
max-width: 500px;
margin: 0 auto;
text-align: center
}

.snsbox .sns-banner a img {
width: 100%;
transition: all 0.4s ease
}

.snsbox .sns-banner a:hover img {
transform: scale(1.05)
}

.blue-box {
background-color: #ddf2ff;
padding: 50px 50px;
border-radius: 10px;
position: relative;
max-width: 900px;
margin: 30px auto
}

@media all and (max-width: 639px) {
.blue-box {
padding: 40px 30px
}
}

.blue-box::before {
position: absolute;
content: "";
background-image: repeating-linear-gradient(0deg, #fff, #fff 10px, transparent 10px, transparent 20px, #fff 20px), repeating-linear-gradient(90deg, #fff, #fff 10px, transparent 10px, transparent 20px, #fff 20px), repeating-linear-gradient(180deg, #fff, #fff 10px, transparent 10px, transparent 20px, #fff 20px), repeating-linear-gradient(270deg, #fff, #fff 10px, transparent 10px, transparent 20px, #fff 20px);
background-size: 3px calc(100% + 20px), calc(100% + 20px) 3px, 3px calc(100% + 20px), calc(100% + 20px) 3px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
width: 96%;
height: 86%;
top: 7%;
left: 2%
}

.blue-box-2 {
background-color: #ddf2ff;
padding: 50px 50px;
border-radius: 10px;
position: relative;
max-width: 900px;
margin: 30px auto
}

@media all and (max-width: 639px) {
.blue-box-2 {
padding: 40px 30px
}
}

.blue-box-2::before {
position: absolute;
content: "";
border: 2px solid #fff;
width: 96%;
height: 86%;
top: 7%;
left: 0;
right: 0;
margin: 0 auto;
text-align: center
}

@media all and (max-width: 639px) {
.blue-box-2::before {
width: 90%;
height: 90%;
top: 5%
}
}

.blue-box2 {
background-color: #fafafa;
padding: 40px 50px;
border-radius: 10px;
position: relative
}

@media all and (max-width: 639px) {
.blue-box2 {
padding: 40px 30px
}
}

.blue-box2::before {
position: absolute;
content: "";
background-image: repeating-linear-gradient(0deg, #e0f3fb, #e0f3fb 10px, transparent 10px, transparent 20px, #e0f3fb 20px), repeating-linear-gradient(90deg, #e0f3fb, #e0f3fb 10px, transparent 10px, transparent 20px, #e0f3fb 20px), repeating-linear-gradient(180deg, #e0f3fb, #e0f3fb 10px, transparent 10px, transparent 20px, #e0f3fb 20px), repeating-linear-gradient(270deg, #e0f3fb, #e0f3fb 10px, transparent 10px, transparent 20px, #e0f3fb 20px);
background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
width: 96%;
height: 94%;
top: 3%;
left: 2%
}

.white-box {
background-color: #ffffff;
padding: 40px 50px;
border-radius: 10px;
position: relative;
margin-top: 50px
}

@media all and (max-width: 639px) {
.white-box {
padding: 40px 30px
}
}

@keyframes borderAnimation {
from {
background-position: 0 0, -20px 0, 100% -20px, 0 100%
}

to {
background-position: 0 -20px, 0 0, 100% 0, -20px 100%
}
}

.yurai-num {
position: absolute;
content: "";
width: 100px;
height: 200px;
top: -26px;
left: 40px
}

@media all and (max-width: 639px) {
.yurai-num {
width: 78px;
height: 90px;
top: -20px;
left: 10px
}
}

.pagetxt-list li {
padding: 20px
}

.pagetxt-list .ttl {
font-weight: bold
}

.list-type1 {
margin: 0 auto;
justify-content: center
}

@media all and (max-width: 639px) {
.list-type1 {
margin-left: 15px;
margin-right: 25px
}
}

.list-type1 li {
max-width: 400px;
margin-left: 2%;
margin-right: 2%
}

.list-type1 figure {
position: relative
}

.list-type1 figure::before {
content: "";
position: absolute;
bottom: -14px;
right: -14px;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(-45deg, #7ba146, #7ba146 2px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px);
z-index: -1
}

.list-type1 .inner {
position: relative
}

.list-type1 .title {
margin-top: -65px;
margin-bottom: 10px
}

.list-type1 .title .titlebox span {
display: inline-block;
background: #02A1E6;
color: #fff;
padding: 10px 30px;
margin-bottom: 10px
}

.list-type1 .title .titlebox.sub {
font-size: 1.2rem
}

.page-list figure {
overflow: hidden;
object-fit: cover;
width: 100%;
height: 100%;
max-height: 240px
}

.page-list .inner {
background-color: #fff;
padding: 30px 20px
}

.page-list .inner p {
margin-top: 30px
}

.page-nav {
margin: -100px 0 0
}

.page-nav>li {
padding: 10px;
background: #fff;
border-radius: 15px;
box-shadow: 3px 3px 0 rgba(123, 161, 70, 0.6)
}

.page-nav>li:hover {
transition: 0.8s;
background-color: #02A1E6
}

.page-nav>li:hover .mtitle_ribon {
color: #fff
}

@media all and (max-width: 639px) {
.page-nav li {
width: 31%;
position: relative;
margin: 0 calc(2.33% + (2.33% / 2)) 30px 0;
margin-bottom: 60px
}
}

.page-nav .page-nav-link {
display: block
}

.page-nav .photo {
margin: 0 auto;
text-align: center;
padding: 20px;
width: 90%;
max-width: 200px
}

.page-nav .photo img {
width: 100%
}

@media all and (max-width: 639px) {
.page-nav .photo {
padding: 20px 0;
width: 100%
}
}

@media all and (max-width: 639px) {
.page-feature>li {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
margin-bottom: 10px
}
}

.page-feature .page-nav-link {
display: block
}

.page-feature .photo {
margin: 0 auto;
text-align: center;
padding: 20px;
width: 90%;
max-width: 300px
}

.page-feature .photo img {
width: 100%
}

@media all and (max-width: 639px) {
.page-feature .photo {
padding: 20px 0 0;
width: 30%
}
}

@media all and (max-width: 639px) {
.page-feature p {
width: 66%;
margin-left: 4%;
text-align: left;
margin-top: 20px
}
}

@media all and (max-width: 639px) {
.page-feature .sub_txt {
width: 100%;
margin-left: auto;
text-align: left
}
}

.arrow-bottom {
position: relative;
margin: 20px auto 20px;
text-align: center;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #298a50 transparent transparent transparent;
cursor: pointer
}

@media all and (max-width: 639px) {
.arrow-bottom {
border-width: 10px 10px 0 10px;
margin: 10px auto 0
}
}

.page-content-ttl {
position: relative;
text-align: center;
margin: 100px auto 60px;
font-weight: bold;
font-size: 1.7rem
}

.page-content-ttl span {
background: #7ba146;
color: #fff;
padding: 10px 50px;
border-radius: 30px
}

@media all and (max-width: 639px) {
.page-content-ttl span {
padding: 10px 40px
}
}

.page-content-ttl:before {
left: 0;
position: absolute;
content: "";
background: url(../img/page-content-leftline.png) no-repeat;
width: 44%;
height: 30px;
background-size: contain;
top: 0%
}

@media all and (max-width: 896px) {
.page-content-ttl:before {
width: 41%
}
}

@media all and (max-width: 639px) {
.page-content-ttl:before {
background-size: cover;
width: 30%
}
}

.page-content-ttl:after {
right: 0;
position: absolute;
content: "";
background: url(../img/page-content-rightline.png) no-repeat;
width: 44%;
height: 30px;
background-size: contain;
top: 0%
}

@media all and (max-width: 896px) {
.page-content-ttl:after {
width: 41%
}
}

@media all and (max-width: 639px) {
.page-content-ttl:after {
background-size: cover;
width: 30%
}
}

.top-leadtxt {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
text-align: center
}

@media all and (max-width: 639px) {
.top-leadtxt {
padding-top: 80px
}
}

.top-leadtxt::before,
.top-leadtxt::after {
content: "";
width: 30px;
height: 30px
}

.top-leadtxt::before {
margin: -100px 20px 0 0;
border-top: 10px solid #02A1E6;
border-left: 10px solid #333
}

@media all and (max-width: 639px) {
.top-leadtxt::before {
margin: -180px 20px 0 0
}
}

.top-leadtxt::after {
margin: 0 0 -100px 26px;
border-right: 10px solid #333;
border-bottom: 10px solid #02A1E6
}

@media all and (max-width: 639px) {
.top-leadtxt::after {
margin: 0 0 -180px 26px
}
}

.top-leadtxt span {
font-size: 3.4rem
}

.top-leadtxt h2 {
font-size: 3rem;
position: relative;
background: white;
color: black;
margin: 0;
padding: 0;
overflow: hidden
}

.top-leadtxt h2:before {
content: "";
display: block;
position: absolute;
filter: blur(20px);
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #16c4f0 1em, #00e6c0 50%), repeating-linear-gradient(45deg, #2955e6, #204ddf 1em, #f5dd02 1em, #00a0eb 50%);
background-size: 3em 3em, 2em 2em;
animation-name: ani;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate
}

@media all and (max-width: 639px) {
.top-leadtxt h2 {
font-size: 1.8rem;
color: #02A1E6;
background: -webkit-linear-gradient(45deg, #2955e6, #204ddf 1em, #5cf4ff 1em, #00a0eb 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}

.top-leadtxt h2:before {
display: none
}
}

@keyframes ani {
from {
background-position: 0 0
}

to {
background-position: 400% 0
}
}

.top-lead-box {
margin: 60px auto;
max-width: 1200px;
border-radius: 10px;
padding: 40px;
position: relative
}

.top-lead-box:before {
position: absolute;
content: "";
background: url(../img/bg-top.jpg) no-repeat;
background-attachment: fixed;
width: 900px;
height: 460px;
left: -200px;
top: 20px
}

@media all and (max-width: 896px) {
.top-lead-box:before {
height: 90%
}
}

@media all and (max-width: 639px) {
.top-lead-box:before {
height: 100%;
background-attachment: inherit
}
}

@media all and (max-width: 1100px) {
.top-lead-box {
margin-top: 100px;
padding-bottom: 80px
}
}

@media all and (max-width: 639px) {
.top-lead-box {
padding: 20px 0px 140px
}
}

.top-lead-box .top-lead-box-txt {
background: #fff;
padding: 50px 70px;
max-width: 900px;
margin: 40px 0;
display: block;
z-index: 1;
position: relative
}

@media all and (max-width: 639px) {
.top-lead-box .top-lead-box-txt {
padding: 30px 20px 40px
}
}

.top-lead-box .top-lead-box-icon {
position: absolute;
right: -50px;
bottom: -50px;
z-index: 2
}

.top-lead-box .top-lead-box-icon img {
width: 100%
}

@media all and (max-width: 1100px) {
.top-lead-box .top-lead-box-icon {
max-width: 180px;
right: -10px
}
}

@media all and (max-width: 639px) {
.top-lead-box .top-lead-box-icon {
bottom: 20px
}
}

.top-listbox {
margin-top: -100px;
z-index: 100;
max-width: 1200px;
z-index: 10;
margin-left: auto;
margin-right: auto;
position: relative
}

@media all and (max-width: 639px) {
.top-listbox {
margin-top: 0
}
}

.top-listbox.single {
padding-top: 0
}

@media all and (max-width: 639px) {
.top-list {
margin-top: 50px
}
}

.top-list li {
background-color: #fff;
border-radius: 10px;
box-shadow: 6px 5px 0px 0px rgba(147, 147, 147, 0.6)
}

.top-list li figure {
overflow: hidden;
border-radius: 10px 10px 0 0
}

.top-list li .inner {
border-radius: 0 0 10px 10px;
background-color: #fff;
padding: 20px
}

.top-list li .inner .top-list-ttl {
margin-bottom: 20px;
padding: 10px 0;
background-color: #02A1E6;
color: #fff;
text-align: center;
border-radius: 20px 20px 0 0;
margin-top: -62px;
z-index: 10;
position: relative
}

@media all and (max-width: 639px) {
.top-list li .inner .top-list-ttl {
font-size: 1.6rem
}
}

.page-content-list li {
background-color: #fff;
border-radius: 20px 20px
}

.page-content-list .photo img {
border-radius: 20px 20px 0 0
}

.page-content-list .photobox {
width: 40%;
margin: 0 auto;
text-align: center;
position: relative
}

@media all and (max-width: 639px) {
.page-content-list .photobox {
width: 86%
}
}

.page-content-list .inner {
margin-top: -70px;
margin-left: 28px;
text-align: left
}

@media all and (max-width: 639px) {
.page-content-list .inner {
margin-left: 0px
}
}

.page-content-list .inner .ttl {
display: inline-block;
background: #02A1E6;
color: #fff;
padding: 10px 30px;
margin-bottom: 20px;
border-radius: 0 10px 10px 0
}

.page-content-list .inner .ttl.type2 {
background: #155ebe
}

.page-content-list .inner .txt {
padding: 25px 20px
}

.page-content-list .arrow-r {
padding: 0 20px 0;
width: 20%;
max-width: 100px
}

@media all and (max-width: 639px) {
.page-content-list .arrow-r {
width: 100%;
max-width: 80px;
transform: rotate(90deg);
margin: 30px auto
}
}

.page-content-list .arrow-r img {
width: 100%
}

@media all and (max-width: 896px) {
.page-content-list2 {
display: block;
padding-bottom: 20px
}
}

.page-content-list2 li {
position: relative;
display: flex;
flex-wrap: wrap;
background-color: #fff;
border-radius: 20px 20px
}

@media all and (max-width: 896px) {
.page-content-list2 li {
width: 100%
}

.page-content-list2 li:nth-child(2n) {
margin-left: auto
}
}

@media all and (max-width: 639px) {
.page-content-list2 li {
display: block;
margin-top: 0;
margin-bottom: 30px
}
}

.page-content-list2 .photo {
width: 50%
}

.page-content-list2 .photo img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 20px 0 0 20px
}

@media all and (max-width: 639px) {
.page-content-list2 .photo img {
border-radius: 20px 20px 0 0
}
}

@media all and (max-width: 639px) {
.page-content-list2 .photo {
width: 100%
}
}

.page-content-list2 .inner {
width: 50%
}

@media all and (max-width: 639px) {
.page-content-list2 .inner {
width: 100%;
margin-top: -70px
}
}

.page-content-list2 .inner .ttl {
position: absolute;
left: 0;
display: inline-block;
background: #02A1E6;
color: #fff;
padding: 10px 30px;
margin-top: 30px;
border-radius: 0 10px 10px 0
}

@media all and (max-width: 639px) {
.page-content-list2 .inner .ttl {
position: inherit;
margin-top: 0;
margin-bottom: 20px
}
}

.page-content-list2 .inner .txt {
padding: 25px 20px
}

.qa-list dl {
position: relative;
margin: 30px 0 0;
cursor: pointer;
border: 1px solid #f4e8ff
}

.qa-list dl:first-child {
margin-top: 0
}

.qa-list dl:after {
position: absolute;
top: 27px;
right: 26px;
display: block;
width: 7px;
height: 7px;
margin: auto;
content: "";
transform: rotate(135deg);
border-top: 2px solid #000;
border-right: 2px solid #000
}

.qa-list .open::after {
transform: rotate(-45deg)
}

.qa-list dl dt {
position: relative;
margin: 0;
padding: 20px 20px 20px 60px;
font-weight: bold;
background: #fcf9ff
}

.qa-list dl dt:before {
font-size: 22px;
line-height: 1;
position: absolute;
top: 20px;
left: 20px;
display: block;
content: "Q.";
color: #5031df
}

.qa-list dl dd {
position: relative;
margin: 0;
padding: 20px 20px 20px 60px
}

.qa-list dl dd:before {
font-size: 22px;
line-height: 1;
position: absolute;
left: 20px;
display: block;
content: "A.";
font-weight: bold;
color: #9131eb
}

.qa-list dl dd p {
margin: 30px 0 0
}

.qa-list dl dd p:first-child {
margin-top: 0
}

@media all and (max-width: 896px) {
.qa-list dl {
margin: 10px 0 0
}

.qa-list dl:after {
top: 20px;
right: 20px;
width: 7px;
height: 7px
}

.qa-list dl dt {
padding: 16px 26px 16px 40px;
font-size: 14px
}

.qa-list dl dt:before {
font-size: 14px;
top: 20px;
left: 15px
}

.qa-list dl dd {
margin: 0;
padding: 16px 16px 16px 40px;
font-size: 14px
}

.qa-list dl dd:before {
font-size: 14px;
left: 15px;
margin-top: 5px
}

.qa-list dl dd p {
margin: 30px 0 0
}

.qa-list dl dd p:first-child {
margin-top: 0
}
}

.form .form-contents {
padding: 0;
background: transparent;
}

.form .form-contents dl {
margin-bottom: 0;
}

/* .form .form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before {
color: #fff;
background: #155ebe;
padding: 5px 8px;
margin-right: 5px;
font-size: 11px;
border-radius: 20px;
position: relative;
top: -2px;
} */
.form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before{
content: '必須';
color: #fff;
}
.form-pattern-2 dl dd:not(.pattern-exclusion) {
border-bottom: 1px dotted #ccc;
}
/* .form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before {
padding: 5px 8px;
margin-right: 5px;
font-size: 11px;
border-radius: 20px;
position: relative;
top: -2px;
} */
.form .form-contents dd:not(.pattern-exclusion) input.textarea {
height: 40px;
}

.form .form-contents dd:not(.pattern-exclusion) input.w20 {
width: 30%;
}

.form .form-pattern-2 .submit-btn {
color: #fff;
border: none;
background-color: #02A1E6;
padding: 14px 7px;
display: block;
cursor: pointer;
position: relative;
text-align: center;
box-sizing: border-box;
font-size: medium;
font-weight: bold;
width: 300px;
transition: all 0.2s ease-in-out 0s;
margin: 30px auto 0px;
border-radius: 25px;
overflow:hidden;
}

.form .form-pattern-2 .submit-btn:hover {
background-color: #02A1E6;
/* border: 2px solid #02A1E6; */
color: #fff;
border:none;
}

.form .form-pattern-2 .submit-btn:hover::before {
background: #fff;
}

.form .form-pattern-2 .submit-btn::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: "";
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
transition: transform 0.48s cubic-bezier(0.895, 0.03, 0.685, 0.22), border-radius 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) 40ms;
transform: scale(1, 0);
transform-origin: 50% 100%;
}

.form .form-pattern-2 .submit-btn:hover::after {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50% 50% 0 0 / 0 0 0 0;
transition: transform 0.48s cubic-bezier(0.165, 0.84, 0.44, 1), border-radius 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) 20ms;
transform: scale(1, 1);
}
.form-contents .submit-btn::before {
content: "";
display: inline-block;
height: 1em;
width: 1em;
vertical-align: middle;
margin-right: 10px;
-webkit-mask-image: url(https://cdn.rs-sys.jp/img/cmn/icon/envelope-solid.svg);
-webkit-mask-size: auto;
-webkit-mask-repeat: no-repeat;
mask-image: url(https://cdn.rs-sys.jp/img/cmn/icon/envelope-solid.svg);
mask-size: auto;
background-color: #fff;
}