/*****************************************************************************
* FONT IMPORT（HTMLので読み込むことを推奨）
*
*
*****************************************************************************/
/*****************************************************************************
* RESET & BASE
*****************************************************************************/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-family: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
font-size: 1.6rem;
line-height: 1.9;
letter-spacing: 0.03rem;
word-wrap: break-word;
color: #494949;
background: #ffffff;
width: 100%;
margin: 0;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: inherit;
}
a:hover,
a:focus {
color: #555;
outline: 2px solid #0057B8;
outline-offset: 2px;
}
h1 {
font-size: 150%;
font-weight: normal;
}
h2 {
font-size: 130%;
font-weight: normal;
}
h3 {
font-size: 110%;
font-weight: normal;
}
/*****************************************************************************
* TYPOGRAPHY
*****************************************************************************/
.english {
font-family: 'Roboto', sans-serif;
color: #333;
line-height: 1.6;
}
span.adjust_12rem,
span.adjust_16rem,
span.adjust_24rem,
span.adjust_32rem {
display: inline-block;
font-size: inherit;
}
span.adjust_12rem { width: 12rem; }
span.adjust_16rem { width: 16rem; }
span.adjust_24rem { width: 24rem; }
span.adjust_32rem { width: 32rem; }
.sentences__pad {
padding: 0 5.6rem;
}
ol {
font-size: 1.0rem;
}
/*****************************************************************************
* LAYOUT
*****************************************************************************/
.container {
width: 100%;
max-width: 1120px;
margin: 0 auto;
}
.flow-banner {
display: grid;
overflow: hidden;
}
.flow-banner__wrap {
display: flex;
overflow: hidden;
}
.flow-banner__list {
display: flex;
list-style: none;
}
.flow-banner__list--left {
animation: infinity-scroll-left 95s infinite linear 0.5s;
}
.flow-banner__list--right {
animation: infinity-scroll-right 95s infinite linear 0.5s;
}
.flow-banner__item {
width: calc(100vw / 6);
}
.flow-banner__item > img {
width: 100%;
height: 100%;
}
/*****************************************************************************
* FORMS
*****************************************************************************/
input[type=email],
input[type=text],
input[type=number],
input[type=password],
select {
background-color: #fffef3;
font-family: inherit;
font-size: 100%;
border: 2px solid #ddd;
border-radius: 3px;
padding: 4px 8px;
width: 100%;
max-width: 100%;
margin: 0.4rem 0;
}
.text {
margin-top: 0.4rem;
margin-bottom: 1rem;
}
/*****************************************************************************
* BUTTONS
*****************************************************************************/
.btn {
text-align: center;
vertical-align: middle;
font-size: 1.6rem;
font-weight: bold;
line-height: 2.4;
border-radius: 0.32rem;
cursor: pointer;
padding: 0.4rem 1.2rem;
border: none;
}
.btn-millennium_blue {
color: #fff;
background-color: #0057B8;
border: 1px solid #0057B8;
}
.btn-millennium_pink {
color: #fff;
background-color: #E62E8B;
border: 1px solid #E62E8B;
}
.btn-submit {
font-size: 1.6rem;
font-weight: bold;
border-radius: 8px;
padding: 9px 18px;
text-decoration: none;
background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
color: #ffffff;
text-shadow: 1px 1px 0 #528ecc;
box-shadow: inset 1px 1px 0 0 #bbdaf7;
transition: background 0.3s ease;
}
.btn-submit:hover {
background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
}
.btn-submit:active {
position: relative;
top: 1px;
}
/*****************************************************************************
* IMAGES
*****************************************************************************/
img {
display: block;
max-width: 100%;
height: auto;
}
/*****************************************************************************
* DECORATIONS & UTILITIES
*****************************************************************************/
.marker_pen {
background: linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);
}
span.nav-menu_english {
color: #fff;
font-size: 2.2rem;
}
span.nav-menu_japanese {
color: #fff;
font-size: 1.8rem;
}
.yellow-square__block {
background: linear-gradient(119.13deg, #FFD700, #f7f7f7);
font-size: 1.6rem;
padding: 2.0rem;
}
.instagram-image-button {
transition: opacity 0.3s ease;
}
.instagram-image-button:hover {
opacity: 0.8;
}
/*****************************************************************************
* ANIMATIONS
*****************************************************************************/
@keyframes infinity-scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@keyframes infinity-scroll-right {
from { transform: translateX(-100%); }
to { transform: translateX(0%); }
}
/*****************************************************************************
* RESPONSIVE
*****************************************************************************/
@media screen and (max-width: 600px) {
.sentences__pad {
padding: 0 2rem;
}
.adjust_12rem,
.adjust_16rem,
.adjust_24rem,
.adjust_32rem {
display: block;
width: auto;
margin-bottom: 0.4rem;
}
.text {
margin-top: 0.4rem;
margin-bottom: 1rem;
}
}
/* Google Review の Style を再現するための CSS -- BEG */
/* グーグル レビュ カード（Google Review Card）の基本スタイル */
.review-card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
max-width: 450px;
font-family: "Roboto", Arial, sans-serif;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 20px 0;
}
/* ユーザ情報のヘッダ */
.review-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #4285f4;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: bold;
margin-right: 12px;
}
.user-meta {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 14px;
font-weight: 700;
color: #202124;
}
.review-date {
font-size: 12px;
color: #70757a;
}
/* スタ 評価のスタイル */
.star-rating {
display: flex;
margin-bottom: 8px;
}
.star {
color: #fbbc05; /* グーグル（Google）標準のスタ カラ */
font-size: 18px;
margin-right: 2px;
}
.star.empty {
color: #e0e0e0;
}
/* レビュ 本文 */
.review-body {
font-size: 14px;
line-height: 1.5;
color: #3c4043;
}
.review-body .more-link {
color: #1a73e8;
text-decoration: none;
font-weight: 500;
cursor: pointer;
}
.review-body .more-link:hover {
text-decoration: underline;
}
/* Google Review の Style を再現するための CSS -- END */