Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /home/xs423008/comfyenglish.com/public_html/wp-content/themes/theme_org/page.php on line 1
/* ========================
//style.phpの保存用(2022/5/22)
MEDIA QUERY
======================== */
/* ========================
COLOR
======================== */
/* ========================
FONT
======================== */
/* line 47, ../sass/top.scss */
.maintitle h1, .price h3 {
border-bottom: 10px solid #FFF059;
line-height: 0.5;
}
/* ========================
BASE
======================== */
/* line 59, ../sass/top.scss */
html {
margin: 0;
padding: 0;
border: 0;
font-size: 62.5%;
}
/* line 65, ../sass/top.scss */
body {
margin: 0;
padding: 0;
border: 0;
background: #fff;
font-size: 1.6rem;
/* 16px*/
}
/* line 72, ../sass/top.scss */
h1, h2, h3, h4 {
margin: 0;
font-family: "M PLUS 1p", sans-serif;
}
/* line 77, ../sass/top.scss */
.maintitle h1 {
margin-bottom: 20px;
text-align: center;
font-size: calc(100vw / 20);
font-weight: 700;
}
@media (min-width: 1000px) {
/* line 77, ../sass/top.scss */
.maintitle h1 {
font-size: 32px;
}
}
/* line 87, ../sass/top.scss */
.maintitle h2 {
padding-left: .25em;
font-size: calc(90vw / 9);
font-weight: 100;
line-height: 1.2;
text-align: center;
}
/* line 93, ../sass/top.scss */
.maintitle h2 span {
display: block;
}
@media (min-width: 1000px) {
/* line 87, ../sass/top.scss */
.maintitle h2 {
font-size: 70px;
}
}
/* line 102, ../sass/top.scss */
h3 {
border-radius: 1.6rem 1.6rem 0 0;
padding: .8em 0;
line-height: 1;
text-align: center;
font-size: 3.2rem;
font-weight: 100;
}
@media (min-width: 1000px) {
/* line 102, ../sass/top.scss */
h3 {
font-size: 3.6rem;
}
}
/* ========================
LAYOUT
======================== */
/* line 120, ../sass/top.scss */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: .6rem 1.2rem;
background: #fff;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
/* line 131, ../sass/top.scss */
.main {
margin: 0 auto;
width: calc(100% - 24px);
max-width: 1200px;
}
/* line 136, ../sass/top.scss */
.footer {
margin: 0 auto;
padding: 2rem 0;
width: 100%;
background: #FFF059;
font-weight: 700;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
/* ========================
PARTS
======================== */
/* line 152, ../sass/top.scss */
.outer-btn {
margin: 3em auto;
}
/* line 155, ../sass/top.scss */
[class^="btn"] {
border-radius: .5em;
color: #000;
text-decoration: none;
text-align: center;
font-weight: bold;
transition: .2s ease;
}
@media (min-width: 1000px) {
/* line 164, ../sass/top.scss */
.eyecatch {
display: flex;
align-items: center;
justify-content: space-between;
}
/* line 168, ../sass/top.scss */
.eyecatch .maintitle {
width: 48%;
}
/* line 171, ../sass/top.scss */
.eyecatch .movie {
width: 50%;
}
}
/* line 177, ../sass/top.scss */
.gnav {
display: none;
position: fixed;
top: 60px;
left: 20%;
right: 0;
background: rgba(0, 0, 0, 0.8);
}
/* line 184, ../sass/top.scss */
.gnav ul {
list-style: none;
margin: 0;
padding: 1em;
}
/* line 188, ../sass/top.scss */
.gnav ul li {
line-height: 3;
}
/* line 191, ../sass/top.scss */
.gnav ul a {
color: #fff;
}
@media (min-width: 1000px) {
/* line 177, ../sass/top.scss */
.gnav {
position: static;
display: block;
background: none;
}
/* line 199, ../sass/top.scss */
.gnav ul {
display: flex;
padding: 4px;
}
/* line 202, ../sass/top.scss */
.gnav ul li {
margin-left: 20px;
}
/* line 205, ../sass/top.scss */
.gnav ul a {
color: #777;
transition: .2s ease;
}
/* line 208, ../sass/top.scss */
.gnav ul a:hover {
color: #000;
}
}
/* line 216, ../sass/top.scss */
.movie {
margin-top: 20px;
width: 100%;
}
/* line 219, ../sass/top.scss */
.movie .mv {
background-color: black;
object-position: center center;
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 20px;
}
/* line 229, ../sass/top.scss */
.concept {
margin: 3rem auto 6em;
max-width: 900px;
text-align: center;
}
/* line 233, ../sass/top.scss */
.price-table {
border-collapse: collapse;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
width: 100%;
}
/* line 238, ../sass/top.scss */
.price-table th, .price-table td {
padding: 1em 0;
text-align: center;
}
@media (min-width: 1000px) {
/* line 238, ../sass/top.scss */
.price-table th, .price-table td {
font-size: 2.2rem;
}
}
/* line 246, ../sass/top.scss */
.price-table tbody th {
border-top: 1px solid #ccc;
background: #ededed;
padding: .5em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.4rem;
}
@media (min-width: 1000px) {
/* line 246, ../sass/top.scss */
.price-table tbody th {
font-size: 2rem;
}
}
/* line 257, ../sass/top.scss */
.price-table tbody td {
border-top: 1px solid #ccc;
font-size: 1.8rem;
font-weight: 900;
font-family: 'Roboto', sans-serif;
}
@media (min-width: 1000px) {
/* line 257, ../sass/top.scss */
.price-table tbody td {
font-size: 2.5rem;
}
}
/* line 266, ../sass/top.scss */
.price-table tbody tr:last-child td,
.price-table tbody tr:last-child th {
border-bottom: 1px solid #ccc;
}
/* line 271, ../sass/top.scss */
.price-table tfoot td {
font-size: .7em;
text-align: left;
}
.p_01{
font-size: 20px;
margin: auto auto auto 20px;
}
.ul_01{
height: 50px;
font-size: 15px;
margin: 0 auto auto 0;
}
th{
width: 40%;
}
td{
width: 60%;
}
/* line 275, ../sass/top.scss */
.price-table .note {
display: block;
font-size: .6em;
font-weight: 200;
}
@media (min-width: 1000px) {
/* line 275, ../sass/top.scss */
.price-table .note {
font-size: 1.2rem;
}
}
/* ========================
HEADER
======================== */
/* line 291, ../sass/top.scss */
.header {
display: flex;
align-items: center;
}
/* line 294, ../sass/top.scss */
.header a {
text-decoration: none;
}
/* line 297, ../sass/top.scss */
.header .logo img {
width: 45px;
}
/* line 300, ../sass/top.scss */
.header [class^="btn"] {
display: inline-block;
box-sizing: border-box;
padding: .3em .6em;
border: 2px solid #FBA0C6;
font-size: 1.1rem;
}
/* line 307, ../sass/top.scss */
.header .btn-trial-header {
margin: 0 10px;
background: #FBA0C6;
}
@media (min-width: 1000px) {
/* line 307, ../sass/top.scss */
.header .btn-trial-header {
position: absolute;
top: 15px;
right: 20px;
padding: .4em 1.2em;
font-size: 1.6rem;
}
}
/* line 318, ../sass/top.scss */
.header .btn-contact-header {
background: #fff;
}
@media (min-width: 1000px) {
/* line 318, ../sass/top.scss */
.header .btn-contact-header {
display: none;
}
}
/* line 324, ../sass/top.scss */
.header .menu-sp {
display: flex;
flex-direction: column;
margin-left: auto;
font-size: 1rem;
color: #000;
font-family: 'Roboto', sans-serif;
}
@media (min-width: 1000px) {
/* line 324, ../sass/top.scss */
.header .menu-sp {
display: none;
}
}
/* ========================
MAIN
======================== */
/* line 345, ../sass/top.scss */
.main {
margin-top: 80px;
line-height: 1.7;
}
/* line 348, ../sass/top.scss */
.main [class^="btn"] {
display: block;
margin: 20px auto;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-size: 2.5rem;
}
/* line 356, ../sass/top.scss */
.main .btn-trial {
padding: 1em 0;
background: #FBA0C6;
}
@media (min-width: 1000px) {
/* line 360, ../sass/top.scss */
.main .btn-trial:hover {
background: rgba(251, 160, 198, 0.8);
}
}
/* line 365, ../sass/top.scss */
.main .btn-detail {
padding: .75em 0;
}
/* line 369, ../sass/top.scss */
.courses {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
@media (min-width: 1000px) {
/* line 369, ../sass/top.scss */
.courses {
justify-content: space-between;
}
}
/* line 377, ../sass/top.scss */
.courses [class^='course'] {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 10px 3em;
}
@media (min-width: 600px) and (max-width: 1000px) {
/* line 377, ../sass/top.scss */
.courses [class^='course'] {
width: 45%;
}
}
@media (min-width: 1000px) {
/* line 377, ../sass/top.scss */
.courses [class^='course'] {
width: 30%;
}
}
/* line 390, ../sass/top.scss */
.courses .course-school h3,
.courses .course-school .btn-detail {
background: #FBA0C6;
}
@media (min-width: 1000px) {
/* line 394, ../sass/top.scss */
.courses .course-school h3:hover,
.courses .course-school .btn-detail:hover {
background: rgba(251, 160, 198, 0.8);
}
}
/* line 401, ../sass/top.scss */
.courses .course-forkids h3,
.courses .course-forkids .btn-detail {
background: #FFF059;
}
@media (min-width: 1000px) {
/* line 405, ../sass/top.scss */
.courses .course-forkids h3:hover,
.courses .course-forkids .btn-detail:hover {
background: rgba(255, 240, 89, 0.8);
}
}
/* line 412, ../sass/top.scss */
.courses .course-goabroad h3,
.courses .course-goabroad .btn-detail {
background: #83D1EF;
}
@media (min-width: 1000px) {
/* line 416, ../sass/top.scss */
.courses .course-goabroad h3:hover,
.courses .course-goabroad .btn-detail:hover {
background: rgba(131, 209, 239, 0.8);
}
}
/* line 423, ../sass/top.scss */
.price {
margin: 4em auto;
max-width: 960px;
}
/* line 426, ../sass/top.scss */
.price h3 {
margin-bottom: 1em;
padding: 0;
}
@media (min-width: 1000px) {
.body_text_css {
padding: 0.5em 1em;
margin: 2em 0;
color: #232323;
background: #fff8e8;
border-left: solid 10px #ffc06e;
}
.body_box_text{
height: 50px;
text-align: center;
font-size: 40px;
line-height: initial;
}
.tt {
font-size: 30px;
line-height: 2.0;
}
.tt_1 {
font-size: 20px;
line-height: 1.5;
}
.flex_test-box {
background-color: #eee; /* 背景色指定 */
padding: 10px; /* 余白指定 */
display: flex; /* フレックスボックスにする */
justify-content:center;
height: 600px;
}
.flex_test-item {
padding: 10px;
color: #fff; /* 文字色 */
margin: 10px; /* 外側の余白 */
border-radius: 5px; /* 角丸指定 */
width: 50%; /* 幅指定 */
}
.flex_test-item:nth-child(1) {
background-color: #DDA0DD; /* 背景色指定 */
}
.flex_test-item:nth-child(2) {
background-color: #FFA500; /* 背景色指定 */
}
.flex_test-item:nth-child(3) {
background-color: #20B2AA;
}
.link_bottom{
text-align: center;
height: 100px;
margin: auto;
margin-bottom: 40px;
}
.link_url{
margin-bottom: 10px;
display: inline-block;
height: 80%;
vertical-align: middle;
margin-left: 10px;
}
.p_02{
margin-bottom: 0;
font-size: 30px;
}
}
@media screen and (max-width: 896px){
.body_box_text{
height: 50px;
text-align: center;
font-size: 30px;
line-height: initial;
}
.flex_test-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
.flex_test-item:nth-child(1) {
background-color: #FFC0CB; /* 背景色指定 */
}
.flex_test-item:nth-child(2) {
background-color: #F0E68C; /* 背景色指定 */
}
.flex_test-item:nth-child(3) {
background-color: #87CEEB;
}
.p_01{
font-size: 20px;
margin: 0 auto auto 10px;
}
.ul_01{
font-size: 15px;
margin: 0 ;
padding:15px;
}
.link_bottom{
text-align: center;
height: 100px;
margin: auto;
margin-bottom: 40px;
}
.link_url{
margin-bottom: 10px;
}
}
@media screen and (max-width: 480px) {
.body_box_text{
height: 50px;
text-align: center;
font-size: 30px;
line-height: initial;
}
.flex_test-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
.flex_test-item:nth-child(1) {
background-color: #FFC0CB; /* 背景色指定 */
}
.flex_test-item:nth-child(2) {
background-color: #F0E68C; /* 背景色指定 */
}
.flex_test-item:nth-child(3) {
background-color: #87CEEB;
}
.p_01{
font-size: 20px;
margin: 0 auto auto 10px;
}
.ul_01{
font-size: 15px;
margin: 0 ;
padding:15px;
}
.link_bottom{
text-align: center;
height: 100px;
margin: auto;
margin-bottom: 40px;
}
.link_url{
margin-bottom: 10px;
}
}