@charset "utf-8";
html {
opacity: 0;
transition: .2s;
}
html.wf-active {
opacity: 1;
}
body {
min-width: 320px;
position: relative;
}
.outerwrapper {
position: relative;
}
.wrapper_l {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.innerwrapper {
width: 100%;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
}
.h2_img img {
display: block;
max-width: 100%;
height: auto;
margin: auto;
image-rendering: -webkit-optimize-contrast;
}
.h2_img + p {
font-weight: bold;
text-align: center;
font-size: 20px;
line-height: 1.5;
margin-top: 1.6em;
color: #424242;
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.h2_img + p span {
display: inline-block;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.spbr {
display: none;
}
@media screen and (max-width:680px) {
.h2_img + p {
font-size: 17px;
}
}
@media screen and (max-width:413px) {
.h2_img + p {
font-size: 15px;
}
}
nav {
position: fixed;
right: 0;
top: 0;
z-index: 999;
background-color: #FFAC93;
transition: 0.4s;
visibility: hidden;
opacity: 0;
}
nav.on {
visibility: visible;
opacity: 1;
}
nav ul {
margin-top: auto;
font-size: 18px;
padding: 80px 1.6em 0.3em 1.6em;
}
nav a {
display: block;
text-decoration: none;
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: bold;
line-height: 1.2;
color: #fff;
letter-spacing: 0.08em;
font-feature-settings: "palt";
padding: 1.3em 3.8em 1.3em 0.2em;
background-image: linear-gradient(to right, #FF6F3C, #FF6F3C 3px, transparent 3px, transparent 7px);
background-size: 7px 3px;
background-repeat: repeat-x;
background-position: left top;
box-sizing: border-box;
position: relative;
}
nav a::before, nav a::after {
content: "";
position: absolute;
top: 50%;
margin-top: -3px;
right: 1em;
width: 9px;
height: 9px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
opacity: 0.7;
}
nav a::after {
right: 1.5em;
opacity: 0.4;
}
.navbtn {
position: fixed;
right: 10px;
top: 10px;
z-index: 1000;
background-color: #FFAC93;
overflow: hidden;
width: 60px;
height: 60px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-bottom: 19px;
box-sizing: border-box;
}
.navbtn::after {
content: 'MENU';
color: #fff;
position: absolute;
letter-spacing: 0.08em;
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: bold;
text-align: center;
left: 0;
width: 100%;
top: 58%;
padding-left: 2px;
box-sizing: border-box;
line-height: 1.2;
font-size: 11px;
}
.navbtn div, .navbtn div span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.navbtn div {
position: relative;
width: 20px;
height: 16px;
background: none;
border: none;
appearance: none;
cursor: pointer;
}
.navbtn div span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
border-radius: 3px;
}
.navbtn div span:nth-of-type(1) {
top: 0;
}
.navbtn div span:nth-of-type(2) {
top: 7px;
}
.navbtn div span:nth-of-type(3) {
bottom: 0;
}
.navbtn.on {
padding-bottom: 0;
}
.navbtn.on div {
width: 28px;
height: 23px;
}
.navbtn.on div span {
height: 3px;
}
.navbtn.on div span:nth-of-type(1) {
transform: translateY(10px) rotate(-45deg);
}
.navbtn.on div span:nth-of-type(2) {
opacity: 0;
top: 10px;
}
.navbtn.on div span:nth-of-type(3) {
transform: translateY(-10px) rotate(45deg);
}
.navbtn.on::after {
display: none;
}

@media screen and (max-width:767px) {
nav ul {
font-size: 14px;
padding-top: 68px;
}
nav a {
padding: 1.5em 3.8em 1.4em 0.2em;
}
.navbtn {
width: 50px;
height: 50px;
border-radius: 25px;
}
.navbtn::after {
font-size: 10px;
}
}
#kv {
width: 100%;
height: calc(100vh - 80px);
min-height: 540px;
max-height: 1080px;
position: relative;
}
@media screen and (min-width:1025px) {
#kv {
margin-bottom: -70px;
}
}
.kvtxt {
width: 100%;
max-width: 1400px;
margin: auto;
position: relative;
height: 100%;
z-index: 2;
}
.kvtxtinner {
max-width: 250px;
margin-right: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 50px 0% 0.4% 5%;
box-sizing: border-box;
max-height: 840px;
}
.kvtxt img {
display: block;
width: auto;
height: 30vh;
max-height: 268px;
min-height: 180px;
}
#kv p {
font-weight: bold;
font-size: 38px;
line-height: 1.5;
color: #424242;
letter-spacing: 0.2em;
font-family: fot-tsukubrdgothic-std, sans-serif;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
transform: translateY(0.3em);
padding-left: 1vw;
}
#kv p span {
display: inline-block;
margin-right: 0.2em;
position: relative;
z-index: 2;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
#kv p span::before {
content: '';
position: absolute;
z-index: -1;
top: -0.3em;
bottom: 0.5em;
left: 1px;
right: 1px;
background-color: rgba(255, 255, 255, .7);
}
#slide {
position: absolute;
z-index: 1;
left: calc(50% - 380px);
right: 0;
top: 0;
bottom: 0;
}
@media screen and (max-width:1400px) {
#kv p {
font-size: 34px;
padding-left: 0;
}
}
@media screen and (max-width:1260px) {
#slide {
left: 250px;
}
}
@media screen and (max-width:1024px) {
#kv {
height: calc(100vh - 120px);
}
}
@media screen and (max-width:767px) {
#kv {
width: 100%;
height: 82vh;
min-height: 520px;
}
.kvtxtinner {
padding: 10px;
padding-bottom: 20px;
}

.kvtxt h1 img {
display: block;
position: absolute;
width: 160px;
height: auto;
min-height: 0;
}
#kv p {
font-size: 30px;
}
#slide {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 70px;
bottom: 0;
}
}
@media screen and (max-width:540px) {
.kvtxt h1 img {
width: 124px;
}
#kv p {
font-size: 30px;
line-height: 1.4;
}
}
@media screen and (max-width:414px) {
#kv p {
font-size: 28px;
line-height: 1.3;
}
}
@media screen and (max-width:413px) {
#kv p {
font-size: 26px;
}
}
#lede {
padding: 120px 0 100px;
}
.ledetxtwrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image: url("images/img_ledebg.png");
background-size: contain;
background-position: center 64%;
background-repeat: no-repeat;
max-width: 1054px;
margin: auto;
padding-bottom: 90px;
}
.ledetxt {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
box-sizing: border-box;
}
.ledetxt p {
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: bold;
font-size: 22px;
line-height: 2.3;
color: #424242;
}
.ledetxt p + p {
margin-right: 2.3em;
}
.ledetxt p:last-child {
text-indent: 0.5em;
margin-top: -0.5em;
}
@media screen and (max-width:1024px) {
#lede {
padding: 90px 0 75px;
}
}
@media screen and (max-width:1023px) {
.ledetxt {
-webkit-writing-mode: initial;
-ms-writing-mode: initial;
writing-mode: initial;
text-align: center;
}
.ledetxt p {
line-height: 1.8;
}
.ledetxt p + p {
margin-right: 0;
margin-top: 1.5em;
}
.ledetxt p:last-child {
margin-top: 1.5em;
transform: translateX(-.5em);
}
.ledetxtwrapper {
background-image: none;
position: relative;
}
.ledetxtwrapper::before, .ledetxtwrapper::after {
content: '';
position: absolute;
z-index: -1;
background-image: url("images/img_ledebg.png");
height: 114px;
width: 110px;
background-size: cover;
bottom: 26%;
}
.ledetxtwrapper::before {
background-position: left center;
left: 10%;
}
.ledetxtwrapper::after {
background-position: right center;
right: 10%;
}
}
@media screen and (max-width:940px) {
.ledetxtwrapper::before, .ledetxtwrapper::after {
height: 104px;
}
.ledetxtwrapper::before {
background-position: left center;
left: 7%;
}
.ledetxtwrapper::after {
background-position: right center;
right: 7%;
}
}
@media screen and (max-width:800px) {
.ledetxtwrapper::before, .ledetxtwrapper::after {
height: 90px;
}
.ledetxtwrapper::before {
background-position: left center;
left: 4%;
}
.ledetxtwrapper::after {
background-position: right center;
right: 4%;
}
}
@media screen and (max-width:640px) {
.ledetxt p {
font-size: 18px;
}
.ledetxtwrapper::before, .ledetxtwrapper::after {
height: 80px;
}
.ledetxtwrapper::before {
left: 2%;
}
.ledetxtwrapper::after {
right: 2%;
}
}
@media screen and (max-width:560px) {
#lede {
padding: 70px 0 60px;
}
.ledetxt p {
font-size: 16px;
}
.ledetxtwrapper::before, .ledetxtwrapper::after {
height: 70px;
bottom: 30%;
}
.ledetxtwrapper::before {
left: 0;
}
.ledetxtwrapper::after {
right: 0;
}
}
@media screen and (max-width:440px) {
#lede {
padding: 60px 0 50px;
}
.ledetxtwrapper {
padding-bottom: 70px;
}
.ledetxt p {
font-size: 14px;
}
.ledetxtwrapper::before, .ledetxtwrapper::after {
height: 56px;
bottom: 24%;
}
.ledetxtwrapper::before {
left: -1%;
}
.ledetxtwrapper::after {
right: -1%;
}
}
@media screen and (max-width:369px) {
#lede {
padding: 50px 0 40px;
}
.ledetxt p {
font-size: 13px;
}
.ledetxtwrapper::before, .ledetxtwrapper::after {
height: 50px;
bottom: 28%;
}
.ledetxtwrapper::before {
left: -2%;
}
.ledetxtwrapper::after {
right: -2%;
}
}
.ledeaddwrapper {
box-sizing: border-box;
display: flex;
justify-content: center;
max-width: 1180px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.newswrapper, .instagram {
display: flex;
align-items: center;
margin: 0 2%;
}
.newswrapper {
background-color: #FEF1EF;
overflow: hidden;
}
.newswrapper h2 {
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: bold;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
letter-spacing: -0.2em;
background-color: #F57461;
color: #fff;
font-size: 22px;
line-height: 1.2;
padding: 7px 9px;
padding-right: 10px;
height: 90px;
box-sizing: border-box;
position: relative;
z-index: 2;
}
.newswrapper h2::before {
content: '';
left: 0;
right: 0;
top: -200px;
bottom: -200px;
background-color: #F57461;
position: absolute;
z-index: -1;
}
.newswrapper ul {
padding: 14px 20px;
box-sizing: border-box;
width: calc(100% - 45px);
}
.newswrapper ul li {
width: 100%;
}
.newswrapper ul li + li {
margin-top: 10px;
}
.newswrapper a {
text-decoration: none;
display: table;
overflow: hidden;
color: #F57461;
width: 100%;
table-layout: fixed;
}
.newswrapper a:hover {
color: #F57461;
}
.newswrapper a span {
font-size: 12px;
line-height: 1.2;
color: #F57461;
display: table-cell;
}
.newswrapper a span:first-child {
width: 60px;
}
.newswrapper a span + span {
padding-left: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.newswrapper a:hover span + span {
text-decoration: underline;
}
.instagram {
width: 480px;
padding: 15px;
border: 1px solid #D7D7D7;
justify-content: space-between;
text-decoration: none;
}
.instagram p {
text-align: center;
width: calc(100% - 58px);
padding-right: 15px;
box-sizing: border-box;
font-size: 20px;
font-weight: bold;
font-family: fot-tsukubrdgothic-std, sans-serif;
white-space: nowrap;
color: #424242;
}
.instagram p br {
display: none;
}
.instagram div {
width: 58px;
padding-left: 15px;
position: relative;
}
.instagram div::before {
content: '';
left: 0;
top: 0;
bottom: 0;
width: 1px;
background-color: #D7D7D7;
position: absolute;
}
.instagram img {
display: block;
}
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .ledeaddwrapper {
display: block;
}
*::-ms-backdrop, .newswrapper {
margin: auto;
max-width: 700px;
}
*::-ms-backdrop, .instagram {
margin: auto;
margin-top: 50px;
}
}
@media screen and (max-width:1180px) {
.ledeaddwrapper {
display: block;
}
.newswrapper {
margin: auto;
max-width: 700px;
}
.instagram {
margin: auto;
margin-top: 50px;
}
}
@media screen and (max-width:640px) {
.instagram {
width: auto;
display: table;
padding: 15px;
}
.instagram p {
display: table-cell;
vertical-align: middle;
padding-right: 15px;
font-size: 18px;
}
.instagram div {
display: table-cell;
vertical-align: middle;
width: 34px;
padding-left: 15px;
}
.instagram img {
width: 100%;
height: auto;
}
}
@media screen and (max-width:500px) {

.instagram p {
text-align: left;
line-height: 1.3;
}
.instagram p br {
display: block;
}
}
@media screen and (max-width:413px) {
.instagram {
padding: 10px;
}
.instagram p {
padding-right: 10px;
font-size: 16px;
letter-spacing: 0;
}
.instagram div {
padding-left: 10px;
}
}
#pcon {
padding: 90px 0 50px;
overflow: hidden;
margin-bottom: 80px;
}
.pconouterwrapper01::before {
content: '';
position: absolute;
left: 0;
top: -100px;
bottom: 0;
right: calc(50% - 630px);
transform: translateX(-5%);
background-color: #E7EEF3;
z-index: -1;
}
@media screen and (max-width:1400px) {
.pconouterwrapper01::before {
right: 5.2%;
}
}
.pconimgwrapper {
display: flex;
position: relative;
}
.pconimgwrapper > div {
width: 50%;
}
.pconimgwrapper > div img {
width: 100%;
display: block;
height: auto;
}
.pconimgwrapper h2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pconimgwrapper h2 img {
width: 50.953%;
display: block;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
.pconimgwrapper p {
position: absolute;
right: 1.4%;
bottom: 6px;
color: #fff;
font-size: 12px;
line-height: 1.4;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
font-feature-settings: "palt";
}
.pconouterwrapper01 {
font-size: 20px;
}
.pcontxt01 {
font-weight: bold;
margin-top: 3.8em;
text-align: center;
font-size: 1em;
line-height: 1.7;
color: #5F4632;
letter-spacing: 0.08em;
font-feature-settings: "palt";
padding-left: 6%;
padding-right: 6%;
box-sizing: border-box;
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.pconouterwrapper01 h3 {
font-weight: bold;
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 2.2em;
text-align: center;
font-size: 1em;
line-height: 1.7;
color: #5F4632;
background-image: linear-gradient(to right, #FF6F3C, #FF6F3C 3px, transparent 3px, transparent 12px);
background-size: 12px 3px;
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom: .2em;
padding-left: 0.2em;
padding-right: 0.2em;
letter-spacing: 0.08em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.pcontxt02 {
font-weight: bold;
margin-top: 0.9em;
text-align: center;
font-size: 1.2em;
line-height: 1.3;
color: #5F4632;
letter-spacing: 0.05em;
font-feature-settings: "palt";
box-sizing: border-box;
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.pcontxt03 {
max-width: 780px;
font-weight: bold;
margin: 3.8em auto 0;
padding: .35em 1em .35em;
text-align: center;
font-size: 1.05em;
line-height: 1.3;
color: #fff;
background: #F57461;
letter-spacing: 0.15em;
font-feature-settings: "palt";
box-sizing: border-box;
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.pconouterwrapper01 p span {
display: inline-block;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.pconouterwrapper02 {
padding: 50px 0;
}
.pconouterwrapper02::before {
content: '';
position: absolute;
left: 0;
top: 0;
/*height: 220px;*/
bottom: 0;
right: calc(50% - 630px);
transform: translateX(-5%);
background-color: #E7EEF3;
z-index: -1;
}
@media screen and (max-width:1400px) {
.pconouterwrapper02::before {
right: 5.2%;
}
}
.kiyakuwrapper {
width: 100%;
max-width: 910px;
margin-left: auto;
margin-right: auto;
/*border: 1px solid #909090;*/
box-sizing: border-box;
/*background-color: #fff;*/
}
.kiyakuheader {
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.kiyakuheader > div {
display: none;
height: 58px;
width: 234px;
background-color: #909090;
color: #fff;
font-size: 18px;
font-weight: bold;
line-height: 58px;
text-align: center;
cursor: pointer;
letter-spacing: 0.08em;
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.kiyakuheader > div:first-child {
display: block;
}
.kiyakuheader.on > div:first-child {
display: none;
}
.kiyakuheader.on > div:nth-child(2) {
display: block;
}
.kiyakubody {
padding: 20px 5%;
box-sizing: border-box;
font-size: 13px;
line-height: 1.5;
color: #424242;
text-align: justify;
}
.kiyakubody ul li {
padding-left: 1em;
text-indent: -1em;
}
.kiyakubody h3 {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 1em;
text-align: center;
}
.kiyakubody h4 {
margin-top: 1.8em;
font-weight: bold;
}
@media screen and (max-width:1024px) {
#pcon {
padding: 37px 0;
margin-bottom: 60px;
}
}
@media screen and (max-width:768px) {
.pconouterwrapper01::before {
top: -60px;
right: 7%;
transform: translateX(0);
}
.pconimgwrapper {
flex-wrap: wrap;
margin-left: -6%;
margin-right: -6%;
}
.pconimgwrapper h2 {
position: static;
}
.pconimgwrapper h2 img {
width: 95%;
max-width: 600px;
display: block;
height: auto;
margin-top: -19%;
}
.pconimgwrapper p {
position: static;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: fot-tsukubrdgothic-std, sans-serif;
color: #5F4632;
font-weight: bold;
text-shadow: none;
margin-top: 4px;
margin-bottom: -10px;
}
.pcontxt01 {
padding-left: 3%;
padding-right: 3%;
}
.pcontxt03 {
max-width: 500px;
font-size: 0.87em;
letter-spacing: .2em;
padding: .4em 0 .5em;
}
.pconouterwrapper02 {
padding: 36px 0;
}
.pconouterwrapper02::before {
right: 7%;
transform: translateX(0);
/*height: 192px;*/
}
}
@media screen and (max-width:680px) {
.pconouterwrapper01 {
font-size: 18px;
}
.pconimgwrapper p {
margin-top: 4px;
margin-bottom: 0;
}
.pcontxt01 {
margin-top: 3em;
}
.pconouterwrapper01 h3 {
margin-top: 2em;
}
.pcontxt02 {
margin-top: 0.6em;
}
.kiyakuheader {
height: 100px;
}
.kiyakuheader > div {
height: 48px;
width: 220px;
font-size: 16px;
line-height: 48px;
}
}
@media screen and (max-width:440px) {
.pconimgwrapper p {
font-size: 11px;
margin-bottom: 2px;
}
.kiyakubody {
font-size: 11px;
}
.pcontxt03 {
font-size: 0.8em;
padding: .4em 0 .5em;
}
}
@media screen and (max-width:414px) {
.pcontxt01 {
width: 100%;
font-size: 0.89em;
}
}
@media screen and (max-width:374px) {
.pconimgwrapper p {
font-size: 10px;
margin-bottom: 4px;
}
.kiyakubody {
font-size: 10px;
}
}
#spotmap {
padding: 80px 0 0;
background-color: #FFF9E6;
}
.img_spotmap {
display: block;
max-width: 100%;
height: auto;
margin: auto;
margin-top: 44px;
margin-bottom: 70px;
image-rendering: -webkit-optimize-contrast;
}
#spotmap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: -15px;
}
#spotmap ul li {
width: 47.143%;
overflow: hidden;
margin-bottom: 56px;
}
#spotmap ul li > img {
display: block;
max-width: 100%;
height: auto;
}
#spotmap ul li h3 img {
display: block;
margin: 9px 0 6px;
max-width: 90%;
image-rendering: -webkit-optimize-contrast;
}
#spotmap ul li p {
text-align: justify;
font-size: 16px;
color: #5F4941;
line-height: 1.7;
}
@media screen and (max-width:1024px) {
#spotmap {
padding: 60px 0 0;
background-color: #FFF9E6;
}
.img_spotmap {
margin-top: 4%;
margin-bottom: 7%;
}
#spotmap ul li {
margin-bottom: 5%;
}
#spotmap ul li h3 img {
margin: 7px 0 3px;
}
#spotmap ul li p {
font-size: 15px;
}
}
@media screen and (max-width:767px) {
#spotmap ul {
justify-content: center;
}
#spotmap ul li {
width: 100%;
max-width: 594px;
}
}
@media screen and (max-width:699px) {
.img_spotmap {
margin-top: 6%;
margin-bottom: 9%;
}
#spotmap ul li {
margin-bottom: 8%;
}
}
@media screen and (max-width:500px) {
#spotmap ul li {
margin-bottom: 10%;
}
#spotmap ul li h3 img {
width: 280px;
height: auto;
margin: 4px 0 2px;
}
#spotmap ul li p {
font-size: 14px;
line-height: 1.6;
}
}
#course {
padding: 80px 0 120px;
}
.courseitem {
display: flex;
position: relative;
}
.courseitemr {
flex-direction: row-reverse;
}
.courseitemimgwrap {
width: 57.858%;
}
.courseitemimg {
display: grid;
display: -ms-grid;
}
.courseitemimg > div {
border-radius: 16px;
overflow: hidden;
}
.courseitemimg > div > div {
border-radius: 16px;
overflow: hidden;
}
.courseitemimg img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
.courseitemtxt {
width: 42%;
padding: 0 6%;
box-sizing: border-box;
}
.courseitemtxt h3 {
text-align: center;
font-weight: bold;
display: table;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.8em;
font-size: 36px;
line-height: 1.4;
color: #424242;
background-image: linear-gradient(to right, #FF6F3C, #FF6F3C 3px, transparent 3px, transparent 7px);
background-size: 7px 3px;
background-repeat: repeat-x;
background-position: left bottom;
padding-bottom: .32em;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.courseitemtxt rt {
font-family: fot-tsukubrdgothic-std, sans-serif;
font-size: 0.4em;
font-weight: bold;
padding-top: 0.4em;
}
.courseitemtxt p {
text-align: justify;
font-size: 15px;
line-height: 1.8;
letter-spacing: 0.05em;
color: #424242;
font-feature-settings: "palt";
}
.courseitemtxt a {
display: block;
width: 240px;
height: 60px;
color: #fff;
text-align: center;
font-weight: bold;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
background-color: #FF6F3C;
line-height: 60px;
text-decoration: none;
margin: 40px auto 0;
vertical-align: middle;
font-size: 18px;
transition: 0.2s;
}
.courseitemtxt a img {
display: inline-block;
vertical-align: sub;
margin-left: 3px;
}
.courseitemtxt a:hover {
opacity: 0.8;
}
@media screen and (max-width:1024px) {
#course {
padding: 60px 0 70px;
}
.courseitemtxt {
padding-right: 0;
padding-left: 5%;
}
.courseitemr .courseitemtxt {
padding-right: 5%;
padding-left: 0;
}
.courseitemtxt h3 {
font-size: 30px;
}
.courseitemtxt p {
font-size: 14px;
}
.courseitemtxt a {
margin: 30px auto 0;
}
}
@media screen and (max-width:767px) {
.courseitem {
flex-direction: column;
align-items: center;
}
.courseitemimgwrap, .courseitemtxt {
width: 100%;
max-width: 594px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.courseitemtxt {
width: 70%;
min-width: 280px;
padding-bottom: 0 !important;
}
.courseitemtxt h3 {
margin-top: 5%;
}
.courseitemtxt p {
padding-bottom: 0 !important;
}
.courseitemimg > div, .courseitemimg > div > div, .courseitemimg img {
border-radius: 10px;
}
}
@media screen and (max-width:480px) {
.courseitemtxt {
width: 80%;
}
.courseitemtxt h3 {
font-size: 28px;
}
.courseitemtxt p {
font-size: 13px;
}
.courseitemtxt a {
width: 210px;
height: 50px;
line-height: 50px;
}
}
.courseitem01 .courseitemtxt p {
padding-bottom: 50%;
}
.courseitemimg01 .ciimg01 {
width: 105.091%;
}
.courseitem02 .courseitemtxt {
padding-top: 2%;
}
.courseitemimg02 {
grid-template-columns: 41.977% 13px 1fr;
grid-template-rows: 58.21% 13px 1fr;
-ms-grid-columns: 41.977% 13px 1fr;
-ms-grid-rows: 58.21% 13px 1fr;
}
.courseitemimg02 .ciimg01 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.courseitemimg02 .ciimg02 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
-ms-grid-column: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
}
.courseitemimg02 .ciimg03 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 1;
-ms-grid-row: 3;
overflow: visible;
position: relative;
}
.courseitemimg03 {
grid-template-columns: 1fr 13px 41.977%;
grid-template-rows: auto 13px auto;
-ms-grid-columns: 1fr 13px 41.977%;
-ms-grid-rows: auto 13px auto;
}
.courseitemimg03 .ciimg01 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
}
.courseitemimg03 .ciimg02 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 1;
-ms-grid-row: 3;
}
.courseitemimg03 .ciimg03 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 3;
-ms-grid-row: 3;
}
.courseitem03 .courseitemtxt {
padding-bottom: 16%;
}
.courseitemimg04 {
grid-template-columns: 41.977% 13px 1fr;
grid-template-rows: auto 13px auto;
-ms-grid-columns: 41.977% 13px 1fr;
-ms-grid-rows: auto 13px auto;
}
.courseitemimg04 .ciimg01 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
}
.courseitemimg04 .ciimg02 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 1;
-ms-grid-row: 3;
}
.courseitemimg04 .ciimg03 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 3;
-ms-grid-row: 3;
}
@media screen and (min-width:768px) {
.courseitemimg02 .ciimg03 > div {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 148%;
overflow: visible;
}
.courseitemimg02 .ciimg03 > div > div {
height: 100%;
width: 100%;
border-radius: 16px;
overflow: visible;
}
.courseitemimg02 .ciimg03 img {
float: right;
width: auto;
height: 100%;
margin-right: 0;
margin-left: auto;
}
}
@media screen and (max-width:767px) {
.courseitemimg01 .ciimg01 {
width: 100%;
}
.courseitemimg02 {
grid-template-columns: 15% 8px 33% 8px 1fr;
grid-template-rows: 52.21% 8px 1fr;
-ms-grid-columns: 15% 8px 33% 8px 1fr;
-ms-grid-rows: 52.21% 8px 1fr;
}
.courseitemimg02 .ciimg01 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 3;
-ms-grid-row: 1;
}
.courseitemimg02 .ciimg02 {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 4;
-ms-grid-column: 5;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
}
.courseitemimg02 .ciimg03 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-column-span: 3;
overflow: visible;
position: relative;
}
.courseitemimg03 {
grid-template-columns: 1fr 8px 41.977%;
grid-template-rows: auto 8px auto;
-ms-grid-columns: 1fr 8px 41.977%;
-ms-grid-rows: auto 8px auto;
}
.courseitemimg04 {
grid-template-columns: 41.977% 8px 1fr;
grid-template-rows: auto 8px auto;
-ms-grid-columns: 41.977% 8px 1fr;
-ms-grid-rows: auto 8px auto;
}
}
.courseadd {
position: relative;
}
.courseadd p {
display: table;
text-align: center;
font-weight: bold;
color: #89ABC4;
letter-spacing: 0.08em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
font-size: 28px;
line-height: 1.4;
padding: 0 1em;
}
.courseadd p span {
display: block;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
font-size: 0.64em;
}
.courseadd img {
display: block;
height: auto;
position: relative;
z-index: 10;
image-rendering: -webkit-optimize-contrast;
}
.courseadd00 {
margin-top: 60px;
margin-bottom: 14px;
}
.courseadd00 img {
display: block;
margin: auto;
image-rendering: -webkit-optimize-contrast;
}
.courseadd01 {
margin-top: -13%;
}
.courseadd01::before {
z-index: -100;
content: '';
position: absolute;
left: 50%;
top: -50px;
bottom: 0;
width: 12px;
margin-left: -6px;
background-color: #E7EEF3;
}
.courseadd01 img {
width: 51.905%;
margin-right: 2%;
margin-left: auto;
}
.courseadd01 p {
margin-left: auto;
margin-right: 52%;
padding-top: 1em;
padding-bottom: 3.5em;
}
.courseadd02 {
padding: 11% 0;
background-image: url("images/bg_course_add01.png");
background-repeat: no-repeat;
background-position: 45% center;
background-size: contain;
}
.courseadd02 p {
margin-right: auto;
margin-left: 52%;
}
.courseadd03 {
padding: 11% 0;
background-image: url("images/bg_course_add02.png");
background-repeat: no-repeat;
background-position: 55% center;
background-size: contain;
}
.courseadd03 p {
margin-left: auto;
margin-right: 52%;
}
.courseadd04 {
margin-top: -12%;
}
.courseadd04::before {
z-index: -100;
content: '';
position: absolute;
left: 50%;
top: -15%;
bottom: 0;
width: 12px;
margin-left: -6px;
background-color: #E7EEF3;
}
.courseadd04 img {
width: 45.794%;
margin-left: 14.28%;
margin-right: auto;
}
.courseadd04 p {
margin-right: auto;
margin-left: 52%;
padding-bottom: 2.7em;
}
.courseadd05 {
margin-top: -1%;
}
.courseadd05::before {
z-index: -100;
content: '';
position: absolute;
left: 50%;
top: -40%;
bottom: 0;
width: 12px;
margin-left: -6px;
background-color: #E7EEF3;
}
.courseadd05 img {
width: 70.477%;
margin-left: 16.73%;
margin-right: auto;
}
.courseadd05 p {
margin-right: auto;
margin-left: 52%;
padding-top: 2.2em;
padding-bottom: 5em;
}
.courseaddend h3 {
text-align: center;
font-weight: bold;
display: table;
margin-left: auto;
margin-right: auto;
font-size: 36px;
line-height: 1.7;
color: #424242;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
position: relative;
}
.courseaddend img {
position: absolute;
bottom: 83%;
left: 73%;
}
@media screen and (max-width:1024px) {
.courseadd p {
font-size: 26px;
}
.courseadd01 {
margin-top: -15%;
}
.courseadd01::before {
top: -50px;
width: 10px;
margin-left: -5px;
}
.courseadd01 img {
width: 62.28%;
}
.courseadd01 p {
padding-top: 1em;
padding-bottom: 2.5em;
}
.courseadd02, .courseadd03 {
padding: 80px 0;
}
.courseadd04 {
margin-top: -13%;
}
.courseadd04::before {
top: -20%;
width: 10px;
margin-left: -5px;
}
.courseadd04 img {
width: 54.9%;
margin-left: 9%;
}
.courseadd04 p {
padding-bottom: 2em;
}
.courseadd05::before {
width: 10px;
margin-left: -5px;
}
.courseadd05 img {
width: 84.5%;
margin-left: 13.9%;
}
.courseadd05 p {
padding-top: 1.4em;
padding-bottom: 4.8em;
}
.courseaddend img {
position: absolute;
bottom: 83%;
left: 73%;
}
}
@media screen and (max-width:768px) {
.courseadd01 {
margin-top: -18%;
}
}
@media screen and (max-width:767px) {
.courseadd {
margin-top: 0 !important;
}
.courseadd00 {
margin-top: 50px !important;
}
.courseadd::before {
top: 0 !important;
}
.courseadd p {
font-size: 18px;
white-space: nowrap;
text-shadow: 0 0 10px #fff;
}
.courseadd p span {
font-size: .8em;
}
.courseadd01 {
margin: 10px auto !important;
padding: 25px 0;
box-shadow: 0 0 15px 15px #fff inset;
}
.courseadd01 img {
width: 80.2%;
margin-right: 8.7%;
margin-left: auto;
}
.courseadd01 p {
padding-bottom: 1.6em;
}
.courseadd02, .courseadd03 {
margin: 10px auto !important;
}
.courseadd04 {
margin: 10px auto !important;
padding: 25px 0;
box-shadow: 0 0 15px 15px #fff inset;
}
.courseadd04 img {
width: 70.8%;
margin-left: 8.23%;
}
.courseadd04 p {
margin-right: 0;
margin-left: auto;
text-shadow: 0 0 10px #fff;
padding-bottom: 1em;
padding-top: 0.7em;
}
.courseadd05 {
margin: 10px auto 0 !important;
padding: 25px 0 0;
box-shadow: 0 0 15px 15px #fff inset;
}
.courseadd05 img {
width: 100.74%;
margin-left: 1%;
}
.courseadd05 p {
margin-right: 0;
margin-left: auto;
text-shadow: 0 0 10px #fff;
padding-bottom: 5.8em;
}
}
@media screen and (max-width:520px) {
.courseadd01 img {
width: 96.2%;
margin-right: 1.5%;
}
.courseadd04 img {
width: 84.8%;
margin-left: 4.8%;
}
.courseadd05 img {
width: 105.74%;
margin-left: -2%;
}
}
#access {
padding: 80px 0;
background-color: #FFF9E6;
}
.img_access {
display: block;
max-width: 100%;
height: auto;
margin: auto;
margin-top: 44px;
image-rendering: -webkit-optimize-contrast;
}
@media screen and (max-width:1024px) {
#access {
padding: 60px 0;
}
}
#bnr {
margin-top: 60px;
padding-bottom: 15px;
}
#bnr ul {
text-align: center;
font-size: 0;
padding: 8px 0;
margin-left: -8px;
margin-right: -8px;
}
#bnr li {
display: inline-block;
margin: 8px;
}
#bnr a {
display: block;
transition: .2s;
border: 1px solid #B4B4B4;
}
#bnr a:hover {
opacity: 0.8;
}
footer {
margin-top: 60px;
background-color: #89ABC4;
color: #fff;
height: 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
footer p {
font-weight: bold;
font-size: 15px;
line-height: 1.8;
text-align: center;
font-family: fot-tsukubrdgothic-std, sans-serif;
}
footer p + p {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and (max-width:1200px) {
footer p + p {
position: static;
}
}
@media screen and (max-width:540px) {
footer {
height: auto;
padding: 15px 10px;
}
footer p {
font-size: 13px;
}
}
#toPageTop {
z-index: 103;
position: fixed;
bottom: 10px;
right: 10px;
width: 60px;
height: 60px;
background-color: #FFAC93;
border-radius: 30px;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
display: none;
}
#toPageTop div {
position: relative;
height: 100%;
width: 100%;
}
#toPageTop div::before {
content: "";
position: absolute;
top: 28%;
left: 50%;
width: 10px;
height: 10px;
margin-left: -6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
}
#toPageTop div::after {
content: 'TOP';
color: #fff;
position: absolute;
letter-spacing: 0.08em;
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: bold;
text-align: center;
left: 0;
width: 100%;
top: 49%;
padding-left: 2px;
box-sizing: border-box;
line-height: 1.2;
font-size: 12px;
}
@media screen and (max-width:767px) {
#toPageTop {
width: 50px;
height: 50px;
border-radius: 25px;
}
#toPageTop div::before {
}
#toPageTop div::after {
top: 52%;
font-size: 11px;
}
}
#cafe {
padding: 110px 0 80px 0;
background-color: #FEF1EF;
}
@media screen and (max-width:1024px) {
#cafe {
padding: 80px 0 70px 0;
}
}
#cafe .h2_img {
position: relative;
z-index: 2;
}
#cafe .h2_img::before {
content: '';
position: absolute;
z-index: -1;
width: 500px;
height: 500px;
background-color: #fff;
border-radius: 50%;
left: 50%;
top: -38px;
margin-left: -250px;
}
.cafewrapper {
position: relative;
z-index: 2;
background-color: #fff;
padding: 3.6% 4% 1% 4%;
border-radius: 20px;
}
@media screen and (max-width:767px) {
#cafe .h2_img::before {
width: 180px;
height: 180px;
top: -25px;
margin-left: -90px;
}
#cafe .h2_img::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 56%;
bottom: -2%;
background-color: #fff;
border-radius: 20px 20px 0 0;
}
.cafewrapper {
border-radius: 0 0 20px 20px;
}
}
.cafewrapper > p:first-child {
font-weight: bold;
text-align: center;
font-size: 20px;
line-height: 1.5;
color: #424242;
font-family: fot-tsukubrdgothic-std, sans-serif;
margin: 15px auto;
}
@media screen and (max-width:680px) {
.cafewrapper > p:first-child {
font-size: 17px;
}
}
@media screen and (max-width:413px) {
.cafewrapper > p:first-child {
font-size: 15px;
}
}
.cafewrapper > p:first-child span {
display: inline-block;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
#cafe .courseitem {
padding: 4% 0;
}
@media screen and (max-width:767px) {
#cafe .courseitemtxt {
width: 80%;
padding-bottom: 6% !important;
}
}
#cafe .courseitemtxt h3 {
margin-top: 0 !important;
line-height: 1.2;
padding-bottom: 0.44em;
}
.courseitemtxt p.cafesubheader {
text-align: center;
font-weight: bold;
display: table;
margin-left: auto;
margin-right: auto;
font-size: 20px;
line-height: 1.4;
color: #FF6F3C;
padding-right: 0.05em;
letter-spacing: 0.05em;
margin-bottom: 0.2em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.courseitemtxt p.cafesubheader span {
display: inline-block;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
@media screen and (max-width:1024px) {
.courseitemtxt p.cafesubheader {
font-size: 18px;
}
}
@media screen and (max-width:767px) {
.courseitemtxt p.cafesubheader {
margin-top: 5.4%;
}
}
@media screen and (max-width:480px) {
.courseitemtxt p.cafesubheader {
font-size: 16px;
}
}
.courseitemtxt p.cafeaccess {
font-weight: bold;
margin-top: 2.2em;
padding-bottom: 0.2em;
color: #424242;
font-size: 17px;
line-height: 1.2;
letter-spacing: 0.1em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
background-image: linear-gradient(to right, #BCBCBC, #BCBCBC 2px, transparent 2px, transparent 6px);
background-size: 6px 2px;
background-repeat: repeat-x;
background-position: left top;
}
.courseitemtxt p.cafeaccess span {
display: table;
color: #BCBCBC;
background-color: #fff;
font: inherit;
line-height: inherit;
transform: translateY(-0.6em);
margin-bottom: 0.2em;
}
@media screen and (max-width:1024px) {
.courseitemtxt p.cafeaccess {
font-size: 16px;
}
}
@media screen and (max-width:480px) {
.courseitemtxt p.cafeaccess {
font-size: 15px;
}
}
.courseitemimg05 {
grid-template-columns: 1fr 13px 25.5% 13px 1fr;
grid-template-rows: auto 13px auto;
-ms-grid-columns: 1fr 13px 25.5% 13px 1fr;
-ms-grid-rows: auto 13px auto;
}
.courseitemimg05 .ciimg01 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
}
.courseitemimg05 .ciimg02 {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 5;
-ms-grid-row: 1;
}
.courseitemimg05 .ciimg02 > div {
position: relative;
width: 100%;
height: 100%;
}
.courseitemimg05 .ciimg02 > div img {
position: absolute;
}
.courseitemimg05 .ciimg03 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 1;
-ms-grid-row: 3;
}
.courseitemimg05 .ciimg04 {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-column: 3;
-ms-grid-row: 3;
-ms-grid-column-span: 3;
}
@media screen and (max-width:767px) {
.courseitemimg05 {
grid-template-columns: 1fr 8px 25.5% 8px 1fr;
grid-template-rows: auto 8px auto;
-ms-grid-columns: 1fr 8px 25.5% 8px 1fr;
-ms-grid-rows: auto 8px auto;
}
}
#spotmap2 {
background-color: #EBF6F2;
padding-top: 60px;
margin-top: 40px;
padding-bottom: 60px;
}
.map_addheader {
margin-bottom: 3.6em;
margin-top: -30px;
padding-top: 30px;
}
@media screen and (max-width:1024px) {
#spotmap2 {
padding-top: 50px;
margin-top: 30px;
padding-bottom: 50px;
}
.map_addheader {
margin-bottom: 2em;
}
}
.pconimgwrapper2 h2 {
box-shadow: 5px 5px 5px rgba(0, 0, 0, .15);
}
.pconimgwrapper2 h2 img {
display: block;
width: 100%;
height: auto;
}
.pconimgwrapper2 p {
margin-top: 0.4em;
font-size: 0.6em;
text-align: right;
color: #5F4941;
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: bold;
line-height: 1.3;
}
.pconimgwrapper2 p span {
display: inline-block;
font: inherit;
margin-left: 1em;
}
@media screen and (max-width:548px) {
.pconimgwrapper2 p span {
display: block;
}
}
@media screen and (max-width:408px) {
.pconimgwrapper2 p {
font-size: 0.5em;
}
}
.pcnav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1100px;
width: 90%;
margin: auto;
margin-bottom: 70px;
}
.pcnav ul a {
font-size: 20px;
line-height: 1.2;
padding: 1em 3.4em;
text-decoration: none;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
font-weight: bold;
display: inline-block;
margin: 15px 0;
color: #424242;
transition: color .2s;
border-left: dotted #F57461 3px;
box-sizing: border-box;
}
.pcnav ul li:nth-child(3) a, .pcnav ul li:last-child a {
border-right: dotted #F57461 3px;
}
.pcnav ul a:hover {
color: #F57461;
}
@media screen and (max-width:1240px) {
.pcnav ul a {
font-size: 18px;
padding: 1em 3.4em;
}
}
@media screen and (max-width:1140px) {
.pcnav ul a {
font-size: 18px;
padding: 1em 3em;
}
}
@media screen and (max-width:1080px) {
.pcnav ul a {
font-size: 17px;
padding: 1em 3em;
}
}
@media screen and (max-width:1000px) {
.pcnav ul a {
font-size: 16px;
padding: 1em 2.7em;
}
}
@media screen and (max-width:900px) {
.pcnav ul a {
padding: 1em 2em;
}
}
@media screen and (max-width:799px) {
.pcnav ul {
margin-top: -20px;
margin-bottom: 50px;
}
.pcnav ul a {
font-size: 15px;
margin: 15px 0;
}
}
@media screen and (max-width:750px) {
.pcnav ul {
max-width: 600px;
}
.pcnav ul a {
font-size: 16px;
margin: 13px 0;
}
.pcnav ul li:nth-child(3) a, .pcnav ul li:last-child a {
border-right: none;
}
.pcnav ul li:nth-child(2) a,.pcnav ul li:nth-child(4) a, .pcnav ul li:last-child a {
border-right: dotted #F57461 3px;
}
}
@media screen and (max-width:620px) {
.pcnav ul {
max-width: 520px;
}
.pcnav ul a {
font-size: 15px;
margin: 10px 0;
padding: 1em 1.5em;
}
}
@media screen and (max-width:540px) {
.pcnav ul a {
font-size: 15px;
padding: 1em 1.2em;
border-left: dotted #F57461 2px;
}
.pcnav ul li:nth-child(2) a,.pcnav ul li:nth-child(4) a, .pcnav ul li:last-child a {
border-right: dotted #F57461 2px;
}
}
@media screen and (max-width:500px) {
.pcnav ul a {
font-size: 14px;
padding: 0.8em 1em;
}
}
@media screen and (max-width:440px) {
.pcnav ul a {
font-size: 13px;
padding: 0.8em 1em;
}
}
@media screen and (max-width:413px) {
.pcnav ul a {
font-size: 12px;
padding: 0.8em 0.9em;
}
}
@media screen and (max-width:374px) {
.pcnav ul a {
font-size: 11px;
padding: 0.8em 0.8em;
}
}









#course2 {
padding: 80px 0 120px;
}
#course2 .courseitemtxt h3 {
background-image: linear-gradient(to right, #457E74, #457E74 3px, transparent 3px, transparent 7px);
}
#course2 .courseitemtxt a {
background-color: #457E74;
}
@media screen and (max-width:1024px) {
#course2 {
padding: 60px 0 70px;
}
}
.courseadd10 {
margin-top: 60px;
margin-bottom: 10px;
}
.courseadd10 img {
display: block;
margin: auto;
image-rendering: -webkit-optimize-contrast;
}
.courseadd10 h3 {
text-align: center;
font-weight: bold;
display: table;
margin-left: auto;
margin-right: auto;
font-size: 36px;
line-height: 1.7;
color: #424242;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
position: relative;
}
.courseadd11 {
padding: 7.2% 0;
background-image: url(images/bg_course_add0200.png);
background-repeat: no-repeat;
background-position: 55% center;
background-size: contain;
margin-bottom: 15px;
}
.courseadd11 p {
margin-left: auto;
margin-right: 54%;
color: #78C0A8;
}
.courseadd12 {
padding: 10.97% 0;
background-image: url(images/bg_course_add0202.png);
background-repeat: no-repeat;
background-position: 55% center;
background-size: contain;
margin: 15px auto;
}
.courseadd12 p {
margin-left: auto;
margin-right: 52%;
color: #78C0A8;
}
.courseadd13 {
padding: 12.02% 0;
background-image: url(images/bg_course_add0201.png);
background-repeat: no-repeat;
background-position: 55% center;
background-size: contain;
margin: 15px auto;
}
.courseadd13 p {
margin-left: auto;
margin-right: 56%;
color: #78C0A8;
}
.courseitem02+.courseadd13 {
margin-top: -80px;
}
.courseitem03+.courseadd12 {
margin-top: 0;
}
.courseitem04+.courseadd13 {
margin-top: -80px;
}
.courseitem05+.courseadd12 {
margin-top: -80px;
}
.courseitem06+.courseadd13 {
margin-top: -80px;
}
.courseitem06+.courseadd13 p {
margin-right: auto;
margin-left: 62%;
}
.courseadd13+.courseaddend {
margin-top: 90px;
}
@media screen and (max-width:1024px) {
.courseadd11 {
padding: 44px 0;
margin: 12px auto !important;
}
.courseadd11 p {
margin-right: 63%;
}
.courseadd12 {
padding: 80px 0;
}
.courseadd13 {
padding: 80px 0;
}
.courseitem02+.courseadd13 {
margin-top: -55px;
}
.courseitem04+.courseadd13 {
margin-top: -55px;
}
.courseitem05+.courseadd12 {
margin-top: -55px;
}
.courseitem06+.courseadd13 {
margin-top: -55px;
}
}
@media screen and (max-width:767px) {
.courseadd10 {
margin-top: 50px!important;
}
.courseadd12, .courseadd13 {
margin: 18px auto !important;
}
.courseadd13+.courseaddend {
margin-top: 90px !important;
}
}
#cafe2 {
padding: 110px 0 80px 0;
background-color: #ECF2F1;
position: relative;
z-index: 2;
}
#cafe2 .h2_img img {
z-index: 3;
margin-bottom: -1.5em;
position: relative;
}
#cafe2::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
background-color: #fff;
border-radius: 50%;
left: 50%;
top: 80px;
margin-left: -250px;
z-index: -1;
}
#cafe2 .cafewrapper > p:first-child {
margin-top: 30px;
}
#cafe2 .courseitem {
padding: 4% 0;
}
#cafe2 .courseitemtxt h3 {
background-image: linear-gradient(to right, #457E74, #457E74 3px, transparent 3px, transparent 7px);
}
@media screen and (max-width:1024px) {
#cafe2 {
padding: 80px 0 70px 0;
}
}
@media screen and (max-width:767px) {
#cafe2::before {
width: 180px;
height: 180px;
top: 50px;
margin-left: -90px;
}
#cafe2 .h2_img {
z-index: 3;
margin-bottom: -1.5em;
position: relative;
}
#cafe2 .h2_img::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 70%;
bottom: -2%;
background-color: #fff;
border-radius: 20px 20px 0 0;
}
#cafe2 .cafewrapper > p:first-child {
margin-top: 40px;
}
#cafe2 .courseitemtxt {
width: 80%;
padding-bottom: 8% !important;
}
}
.cafe2_mark01 {
display: block;
margin: auto;
margin-bottom: -10px;
margin-top: 50px;
width: 217px;
height: auto;
}
.cafe2_mark02 {
display: block;
margin: auto;
margin-bottom: 10px;
margin-top: 50px;
width: 164px;
height: auto;
}
@media screen and (max-width:767px) {
.cafe2_mark01 {
margin-top: 30px;
}
.cafe2_mark02 {
margin-top: 30px;
}
}
.courseitemimg09 div, .courseitemimg09 img {
border-radius: 0;
}
.courseitemimg09 > p {
font-size: 13px;
line-height: 1.2;
margin: 1em 0;
color: #424242;
}
.courseitemimg09 p + div {
border: 1px solid #424242;
padding: 1.2em 1.6em;
}
.courseitemimg09 p + div p {
color: #424242;
font-size: 13px;
line-height: 1.5;
}
.courseitemimg07 {
transform: scale(-1, 1);
}
.courseitemimg07 img {
transform: scale(-1, 1);
}

#course2 .courseitem03 .courseitemtxt {
padding: 0 2% 0 8%;
}
@media screen and (max-width:1160px) {
#course2 .courseitem03 .courseitemtxt {
padding: 0 0 0 6%;
}
}
@media screen and (min-width:1025px) and (max-width:1160px) {
#course2 .courseitem03 .courseitemtxt p {
line-height: 1.7;
}
}
@media screen and (min-width:768px) and (max-width:1024px) {
#course2 .courseitem03 .courseitemtxt {
padding: 0 0 0 5%;
}
.courseitemimg07 {
transform: scale(-.9, .9);
transform-origin: 47% top;
}
}


#instagram_feed {
margin-top: -60px;
padding-top: 40px;
padding-bottom: 80px;
}
.instagram_feed_hash {
text-align: center;
font-size: 22px;
line-height: 1.8;
padding-left: 6px;
margin-bottom: 1.08em;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
color: #424242;
}
.instagram_feed_hash a {
font-size: 1.1em;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
text-decoration: none;
background-image: linear-gradient(to right, #FF6F3C, #FF6F3C 3px, transparent 3px, transparent 10px);
background-size: 10px 3px;
background-repeat: repeat-x;
background-position: left bottom;
font-weight: bold;
display: inline-block;
margin-right: 0.1em;
color: #424242;
}
.instagram_feed_hash br {
display: none;
}
.about_takahash {
padding: 15px;
background-color: #FDF6F9;
margin-top: 50px;
display: table;
margin-left: auto;
margin-right: auto;
}
.about_takahash p ,
.about_takahash li {
font-size: 16px;
text-align: justify;
line-height: 1.4;
color: #424242;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.about_takahash ul {
margin-top: 4px;
}
.about_takahash li {
padding-left: 1em;
text-indent: -1em;
}
.about_takahash a {
color: #D93177;
font: inherit;
text-decoration: none;
}
#instagram_feed .takahash-posts {
margin-left: -5px;
margin-right: -5px;
}
#instagram_feed .posted_date {
font-size: 14px;
color: #424242;
line-height: 1.2;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
}
#instagram_feed .takahash-posts.instaframe .post-footer .icon {
font-size: 20px;
}
#takahash-modal .modal-content {
font-size: 14px;
}
#takahash-modal .modal-content .comment ,
#takahash-modal .modal-content .text-right {
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
color: #424242;
line-height: 1.4;
}
#takahash-modal .modal-footer {
padding: 12px 15px;
}
#takahash-modal .modal-footer .likes {
padding-top: 4px;
}
@media screen and (max-width:1024px) {
.instagram_feed_hash {
font-size: 20px;
}
.about_takahash p ,
.about_takahash li {
font-size: 15px;
}
}
@media screen and (max-width:580px) {
.instagram_feed_hash br {
display: block;
}
#instagram_feed .posted_date {
font-size: 13px;
}
#instagram_feed .takahash-posts.instaframe .post-footer .icon {
padding: 6px;
font-size: 16px;
}
}
@media screen and (max-width: 500px) {
.instagram_feed_hash {
font-size: 18px;
}
.about_takahash p ,
.about_takahash li {
font-size: 14px;
}
}
@media screen and (max-width:480px) {
#instagram_feed .posted_date {
font-size: 12px;
padding-top: 4px;
vertical-align: top;
}
#instagram_feed .takahash-posts.instaframe .post-footer .icon {
padding: 5px;
font-size: 13px;
margin-top: 1px;
}
}
@media screen and (max-width:374px) {
.instagram_feed_hash {
font-size: 16px;
}
#instagram_feed .posted_date {
font-size: 10px;
letter-spacing: 0;
}
#instagram_feed .takahash-posts.instaframe .post-footer .icon {
padding: 5px;
font-size: 12px;
}
}
#course2 .courseitem01 .courseitemtxt p {
padding-bottom: 0;
}
#course2 .courseitemtxt p.cafesubheader {
color: #457E74;
}
#course2 .courseitemtxt h3 ,
#cafe2 .courseitemtxt h3 {
line-height: 1.2;
padding-bottom: 0.44em;
}
#course2 .courseitemtxt p+h3 {
margin-top: 0 !important;
}




.courseitem_cafe2end {
flex-wrap: wrap;
}
.about_saho {
width: 57.858%;
border: 1px solid #424242;
padding: 1.2em 1.6em;
box-sizing: border-box;
    margin-bottom: 1em;
}
.about_saho p {
color: #424242;
font-size: 13px;
line-height: 1.5;
text-align: justify;
}
@media screen and (max-width: 767px) {
.about_saho {
width: 94%;
max-width: 420px;
padding: 0.9em 1.2em;
}
.about_saho p {
font-size: 12px;
}
}
.pconouterwrapper01 p span.pcontxt02add {
font-size: 0.7em;
letter-spacing: 0;
white-space: nowrap;
}







.prizewrapper {
font-size: 22px;
text-align: center;
overflow: hidden;
}
.prizewrapper img {
display: block;
margin: auto;
}
.prizewrapper h3 {
margin-top: 3em;
margin-bottom: -3em;
}
.prizewrapper h4 {
margin-top: 4.8em;
margin-bottom: .6em;
}
.prizewrapper h3 img ,
.prizewrapper h4 img {
max-width: 100%;
height: auto;
}
.prizeitemwrapper {
max-width: 1080px;
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.prizeitemwrapper02 {
max-width: 982px;
width: 91%;
}
.prizeitemwrapper img {
max-width: 100%;
height: auto;
}
.prizeitem {
margin-top: 1.8em;
margin-bottom: 1.8em;
}
.prizeitemimg {
margin-bottom: .6em;
border: 10px solid #fff;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 4px -1px rgb(0 0 0 / 30%);
}
.prizeitem p {
font-weight: 600;
font-size: 1.1em;
line-height: 1.8;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
color: #2F2725;
}
.prizeitem_a {
width: 46.9%;
}
.prizeitem_b1 {
width: 40.8%;
}
.prizeitem_b2 {
width: 47%;
}
.prizeitem_c1 {
width: 42%;
}
.prizeitem_c2 {
width: 46%;
}
.prizeitem_d1 {
width: 38%;
}
.prizeitem_d2 {
width: 40%;
}
.prizeitem_d3 {
width: 42%;
}
.prize_oc > p {
font-weight: 600;
line-height: 1.8;
letter-spacing: 0.05em;
font-feature-settings: "palt";
font-family: fot-tsukubrdgothic-std, sans-serif;
color: #2F2725;
  margin-top: 1.6em;
}

.prizewrapper::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: calc(50% - 630px);
transform: translateX(-5%);
background-color: #E7EEF3;
z-index: -1;
}
@media screen and (max-width: 1400px) {
  .prizewrapper h3 {
  margin-top: 4.4vw;
  margin-bottom: -3.4vw;
  }
  .prizewrapper h4 {
  margin-top: 8vw;
  margin-bottom: 1vw;
  }
  .prizeitem {
  margin-top: 2.8vw;
  margin-bottom: 2.8vw;
  }
  .prizeitemimg {
  margin-bottom: .8vw;
  }
  .prizewrapper::before {
  right: 5.2%;
  }
}
@media screen and (max-width: 1080px) {
  .prizewrapper h3{
  margin-top: 7vw;
  }
  .prizewrapper {
  font-size: 2vw;
  }
  .prizeitemimg {
  border: 1vw solid #fff;
  }
}
@media screen and (max-width: 768px) {
  .prizewrapper h3{
  margin-top: 13vw;
  }
  .prizewrapper {
  font-size: 3.2vw;
  }
  .prizewrapper h4 {
  margin-top: 10vw;
  }
  .prizeitem {
  margin-top: 4vw;
  margin-bottom: 4.4vw;
  }
  .prizeitemimg {
  border: 1.5vw solid #fff;
  margin-bottom: 1.2vw;
  }
  .prizeitemwrapper{
  flex-direction: column;
  }
  .prizeitem_a {
  width: 86.8%;
  }
  .prizeitem_b1 {
  width: 65.2%;
  }
  .prizeitem_b2 {
  width: 90.2%;
  }
  .prizeitemwrapper02 {
  width: 100%;
  }
  .prizeitem_c1 {
  width: 55.2%;
  }
  .prizeitem_c2 {
  width: 75.7%;
  }
  .prizeitem_d1 {
  width: 45.2%;
  }
  .prizeitem_d2 {
  width: 65.7%;
  }
  .prizeitem_d3 {
  width: 61.7%;
  }
  .prizewrapper::before {
  right: 7%;
  transform: translateX(0);
  }
}









.prizebtn {
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.prizebtn > div {
display: none;
height: 64px;
width: 340px;
background-color: #457E74;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 64px;
text-align: center;
cursor: pointer;
letter-spacing: 0.08em;
font-family: fot-tsukubrdgothic-std, sans-serif;
}
.prizebtn > div:first-child {
display: block;
}
.prizebtn > div:first-child::after {
  border-width: 2px ;
  border-style: solid;
  border-color: transparent;
  border-right-color: #fff;
  border-bottom-color: #fff;
  width: 0.6em;
  height: 0.6em;
  content: "";
  display: inline-block;
  transform: rotate(45deg) translateY(-.3em);
  margin-left: .3em;
}
.prizebtn > div:nth-child(2)::before {
  content: '✕';
  color: #fff;
  margin-right: 0.5em;
  display: inline-block;
font-weight: bold;
}
.prizebtn.on > div:first-child {
display: none;
}
.prizebtn.on > div:nth-child(2) {
display: block;
}
@media screen and (max-width: 480px) {
.prizebtn {
height: 90px;
}
.prizebtn > div {
height: 54px;
width: 100%;
max-width: 340px;
font-size: 16px;
line-height: 54px;
}
}