@charset "utf-8";
html {
font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body {
margin: 0;
}  article,
aside,
details, figcaption,
figure,
footer,
header,
main, menu,
nav,
section,
summary { display: block;
} audio,
canvas,
progress,
video {
display: inline-block;
} audio:not([controls]) {
display: none;
height: 0;
} progress {
vertical-align: baseline;
} template, [hidden] {
display: none;
}  a {
background-color: transparent;
} a:active,
a:hover {
outline-width: 0;
}  abbr[title] {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b,
strong {
font-weight: inherit;
} b,
strong {
font-weight: bolder;
} dfn {
font-style: italic;
} h1 {
font-size: 2em;
margin: 0.67em 0;
} mark {
background-color: #ff0;
color: #000;
} small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}  img {
border-style: none;
} svg:not(:root) {
overflow: hidden;
}  code,
kbd,
pre,
samp {
font-family: monospace, monospace; font-size: 1em; } figure {
margin: 1em 40px;
} hr {
box-sizing: content-box; height: 0; overflow: visible; }  button,
input,
select,
textarea {
font: inherit;
} optgroup {
font-weight: bold;
} button,
input, select { overflow: visible;
} button,
input,
select,
textarea { margin: 0;
} button,
select { text-transform: none;
} button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
} [disabled] {
cursor: default;
} button,
html [type="button"], [type="reset"],
[type="submit"] {
-webkit-appearance: button; } button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
} button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
} fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } textarea {
overflow: auto;
} [type="checkbox"],
[type="radio"] {
box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} [type="search"] {
-webkit-appearance: textfield;
} [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
 * {
box-sizing: border-box;
margin: 0;
padding: 0;
word-break: normal;
word-wrap: break-word;
}
body {
width: 100%;
overflow-x: hidden;
overscroll-behavior-y: none;
background-color: #fff;
font-family: "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro",
"Hiragino Kaku Gothic Pro", Meiryo, メイリオ, sans-serif;
font-size: 16px;
font-weight: 500;
color: #384251;
font-feature-settings: "palt";
-webkit-text-size-adjust: 100%;
letter-spacing: 0.1em;
}
@font-face {
font-family: DINNextLTPro-Medium;
src: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/en.ttf);
font-weight: normal;
font-style: normal;
}
.en {
font-family: DINNextLTPro-Medium;
}
img {
vertical-align: middle;
max-width: 100%;
border: 0;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.mt-100 {
margin-top: 30px;
}
.mb-120 {
margin-bottom: 100px;
}
.mb50 {
margin-bottom: 50px;
}
.pb60 {
padding-bottom: 60px;
margin-top: 20px;
}
.pb120 {
padding-bottom: 120px;
}
.pt120 {
padding-top: 120px;
}
.pt30 {
padding-top: 30px;
}
.pt60 {
padding-top: 60px;
}
.center {
text-align: center;
align-items: center;
padding: 30px;
}
table {
border-spacing: 0;
border-collapse: collapse;
background-color: transparent;
}
td,
th {
padding: 0;
}
ul li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
} .os-animation {
opacity: 0;
}
.os-animation.animated {
opacity: 1;
} .fixedcontainer {
width: 1080px;
margin: 0 auto;
}
.fixedcontainer2 {
max-width: 1280px;
margin: 0 auto;
width: 90%;
}
@media screen and (max-width: 960px) {
.fixedcontainer {
width: 90%;
}
} a {
color: inherit;
text-decoration: none;
outline: none;
transition: opacity 0.5s ease;
}
a:hover {
opacity: 0.8;
} .text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
} .visible-sp {
display: none;
}
.hidden-sp {
display: block;
} .yellow_back {
background: linear-gradient(to right, #f2c94c 0%, #f2994a 100%);
}
.blue_back {
background: linear-gradient(to right, #54bdc3 0%, #1aa7c7 100%);
}
.pink_back {
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/tetote/banner-back.png) no-repeat center / cover;
}
.yellow {
color: #d6761e;
}
.pink {
color: #f26f78;
}
.blue {
color: #009ab7;
} header {
position: sticky;
top: 0;
width: 100%;
background: #fff;
z-index: 4;
}
.header_in {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.logo {
padding-left: 40px;
}
.header_links {
display: flex;
align-items: center;
}
.header_links > ul {
display: flex;
align-items: center;
}
.header_links > ul li {
margin-right: 32px;
}
.header_links > ul li span img {
width: 30px;
} .menu-trigger {
display: none;
position: relative;
width: 90px;
height: 90px;
cursor: pointer;
z-index: 5;
background: linear-gradient(to bottom, #ffbb1e, #ff9158);
}
.menu-trigger span {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 36px;
height: 2px;
background: #fff;
transition: all 0.4s;
}
.menu-trigger span:nth-of-type(1) {
top: 25px;
}
.menu-trigger span:nth-of-type(2) {
top: 35px;
}
.menu-trigger span:nth-of-type(3) {
top: 45px;
}
.menu-trigger p {
position: absolute;
top: 55px;
width: 100%;
text-align: center;
font-size: 12px;
color: #fff;
}
.menu-trigger.active span:nth-of-type(1) {
transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
transform: translateY(-10px) rotate(45deg);
} .g-nav {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100vh;
z-index: 4;
overflow-x: hidden;
transition: 0.5s;
}
.g-nav.open {
width: 100%;
}
.g-nav .list {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 100vh;
padding: 120px 20px 80px;
overflow-y: auto;
background: #f0f0f0;
}
.g-nav .list li {
text-align: center;
border-bottom: 1px dashed #ccc;
}
.g-nav .list li:first-child {
border-top: 1px dashed #ccc;
}
.g-nav .list li:last-child {
border-bottom: none;
position: absolute;
bottom: 0;
width: 100%;
}
.g-nav .list li a {
display: inline-block;
width: 228px;
padding: 10px 0;
text-align: center;
font-weight: bold;
}
.g-nav .list li.contact_btn a {
border: 3px solid #ff830e;
border-radius: 6px;
color: #ff830e;
background-color: #fff;
padding: 7px 0;
}
.g-nav .list li.order_btn a {
color: #fff;
background-color: #ff830e;
border-radius: 6px;
} .btn {
max-width: 420px;
width: 100%;
margin: 0 auto;
}
.btn a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #fff;
font-weight: 700;
position: relative;
z-index: 1;
overflow: hidden;
padding: 18px 0;
border-radius: 40px;
}
.btn a .btn_icon {
width: 50px;
height: 1px;
background: #fff;
position: relative;
transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn a:hover .btn_icon {
width: 30px;
}
.btn a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(60, 60, 60, 0.1);
opacity: 0;
z-index: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn a:hover::after {
opacity: 1;
} .footer {
margin-top: 10px;
position: relative;
padding: 60px 0;
background-color: #787878;
color: #fff;
}
.footer:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/css/../img/bg_pattern.png);
background-repeat: repeat;
background-size: 100px 100px;
opacity: 0.05;
left: 0;
top: 0;
}
.footer:before {
position: absolute;
z-index: 1;
content: "";
width: 100%;
height: 10px;
top: -10px;
background: linear-gradient(to right, #f2c94c 0%, #f2994a 100%);
}
.footer .fixedcontainer {
position: relative;
z-index: 2;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.footer_company {
display: flex;
align-items: start;
margin-bottom: 30px;
}
.footer_logo {
background: #fff;
border-radius: 50%;
margin-right: 15px;
}
.footer_left {
text-align: right;
}
.footer_left ul {
margin-bottom: 10px;
display: flex;
}
@media screen and (max-width: 520px) {
.footer_left ul {
display: block;
text-align-last: left;
}
}
.footer_left ul li {
margin-left: 20px;
}
.footer_left ul a {
text-decoration: underline;
}
.slider {
height: 402px;
}
.slider .slick-slide {
background: #fff;
padding: 10px;
background: #fff;
border: solid 1px #f2c94c;
box-shadow: 0 12px 12px 0 rgba(40, 47, 60, 0.3);
border-radius: max(10px, min(15px, calc((100vw - 10px - 100%) * 9999)));
margin-left: 10px;
margin-right: 10px;
}
.slick-slide:hover {
color: rgb(242, 111, 120);
}
.slider_txt {
text-align: center;
font-size: 18px;
font-weight: bold;
}
.slider_wrap .fixedcontainer {
position: relative;
}
.slider_illust {
position: absolute;
z-index: -1;
right: -50px;
top: 50px;
}
.slick-slider .slick-list {
padding: 20px 0;
}
.slick-slide h3 {
text-align: left;
margin-top: 10px;
margin-left: 15px;
}
.slick-next:before,
.slick-prev:before {
content: none;
}
.slick-next,
.slick-prev {
width: 60px;
height: 60px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.slick-next {
right: -30px;
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/next.png);
}
.slick-prev {
left: -30px;
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/prev.png);
}
.slick-next:hover {
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/next.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.slick-prev:hover {
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/prev.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.more_btn {
margin-top: 50px;
}
.news_date {
font-family: DINNextLTPro-Medium;
font-size: 14px;
margin: 5px 0;
color: #787878;
}
.video_iframe {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.video_iframe iframe {
width: 100%;
height: 420px;
}
.black_back {
background: #333;
}
.feature_list {
position: relative;
}
.feature_one {
background: #fff;
position: relative;
padding: 40px;
display: flex;
margin-bottom: 40px;
align-items: center;
}
.feature_illust {
position: absolute;
right: 200px;
top: -30px;
}
.feature_content {
width: 700px;
}
.feature_img {
flex: 1;
text-align: center;
}
.feature_header {
display: flex;
text-align: center;
align-items: center;
margin-bottom: 20px;
}
.feature_ttl {
font-size: 24px;
}
.feature_num {
width: 80px;
height: 80px;
border-radius: 50%;
background: #ff9158;
color: #fff;
font-size: 14px;
line-height: 1;
padding: 16px 0 0;
margin-right: 20px;
}
.feature_num span {
font-size: 38px;
font-weight: bold;
display: block;
}
.feature_points {
display: flex;
justify-content: space-between;
}
.title {
text-align: center;
font-size: 30px;
margin-bottom: 20px;
}
.title span {
font-family: DINNextLTPro-Medium;
font-size: 18px;
color: #787878;
display: block;
}
.menu_links {
position: absolute;
right: 20px;
bottom: 20px;
width: 360px;
}
.menu_links a {
display: block;
padding: 15px 0;
color: #fff;
text-align: center;
}
.menu_links div {
margin-top: 20px;
}
.gotop {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 3;
}
.news_list {
display: flex;
flex-wrap: wrap;
} @media screen and (max-width: 960px) { } @media screen and (max-width: 520px) {
.news_list {
display: block;
}
}
news_list > div {
width: 33.333%;
box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 520px) {
.news_list > div {
width: 100%;
}
}
.news_list > div a {
display: block;
padding: 40px;
background-color: #fff;
width: 350px;
}
@media screen and (max-width: 960px) {
.news_list > div a {
width: 340px;
}
} @media screen and (max-width: 520px) {
.news_list > div a {
width: 100%;
}
}
.news_date {
font-family: DINNextLTPro-Medium;
font-size: 14px;
margin: 5px 0;
color: #787878;
}
.news_inner {
position: relative;
}
@media screen and (max-width: 1024px) {
.hidden-sp {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.visible-sp {
display: block;
}
.hidden-sp {
display: none !important;
}
.menu_links {
width: 260px;
}
body {
font-size: 14px;
line-height: 1.7;
}
.fixedcontainer {
width: 90%;
}
.header_contact {
color: #fff;
display: none;
align-items: center;
justify-content: center;
height: 60px;
padding: 0 5px;
font-size: 12px;
}
.header_contact span {
display: block;
text-align: center;
margin-bottom: 3px;
}
.header_contact span img {
width: 20px;
}
.logo img {
width: 160px;
}
.g-nav .list {
width: 300px;
padding-top: 80px;
}
.menu-trigger {
width: 60px;
height: 60px;
}
.menu-trigger span {
width: 30px;
}
.menu-trigger span:nth-of-type(1) {
top: 12px;
}
.menu-trigger span:nth-of-type(2) {
top: 22px;
}
.menu-trigger span:nth-of-type(3) {
top: 32px;
}
.menu-trigger p {
top: 39px;
font-size: 10px;
}
.fv_copyright {
font-size: 10px;
left: -18px;
}
.logo {
padding-left: 20px;
}
.pt120 {
padding-top: 40px;
}
.pb120 {
padding-bottom: 40px;
font-family: 12px;
}
.title {
font-size: 22px;
margin-bottom: 20px;
}
.title span {
font-size: 14px;
font-weight: normal;
}
.btn {
max-width: 300px;
}
.btn a {
padding: 12px 0;
}
.cta {
padding: 50px 0;
}
.cta .fixedcontainer {
display: block;
}
.cta .fixedcontainer > div {
width: 100%;
padding: 20px 0;
}
.cta .fixedcontainer > div h2 {
font-size: 16px;
}
.cta .fixedcontainer > div h2 img {
width: 20px;
}
.tel_num span {
font-size: 36px;
}
.tel_num {
font-size: 22px;
margin: 0;
line-height: 1.2;
}
.cta_tel {
margin-bottom: 10px;
}
.footer {
padding: 30px 0; }
.footer .fixedcontainer {
display: block;
}
.gotop {
position: fixed;
right: 20px;
bottom: 70px;
width: 50px;
}
.footer_right {
text-align: center;
margin-top: 30px;
}
.more_btn {
margin-top: 30px;
}
.title small {
font-size: 16px;
}
.slider_txt {
font-size: 14px;
}
.slick-next,
.slick-prev {
width: 40px;
height: 40px;
}
.slick-next {
right: -10px;
}
.slick-prev {
left: -10px;
}
.slider .slick-slide {
padding: 20px;
}
.slick-slide div {
text-align: center;
}
.slick-slide div img {
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
border-radius: 10px;
}
.slider_illust {
right: 0;
width: 100px;
}
.price .message {
padding: 20px;
}
.price h4 {
font-size: 24px;
margin-bottom: 5px;
}
.instagram h2 {
margin-bottom: 30px;
}
.feature_illust {
right: 50px;
width: 40px;
top: -20px;
}
.feature_one {
padding: 20px;
display: block;
margin-bottom: 20px;
}
.feature_num {
width: 60px;
height: 60px;
margin-right: 10px;
padding-top: 14px;
font-size: 12px;
}
.feature_ttl {
width: calc(100% - 70px);
text-align: left;
font-size: 20px;
line-height: 1.2;
}
.feature_num span {
font-size: 24px;
}
.feature_content {
width: 100%;
margin-bottom: 20px;
}
.feature_points {
flex-wrap: wrap;
justify-content: center;
}
.slider {
height: 340px;
}
}
.t-top-opencampus__inner {
position: relative;
display: flex;
border-radius: 6px;
background: linear-gradient(
45deg,
rgba(26, 167, 199, 0.25) 0,
rgba(26, 167, 199, 0.25) 25%,
rgba(255, 255, 255, 0.25) 50%,
rgba(252, 120, 113, 0.25) 75%,
rgba(252, 120, 113, 0.25) 100%
);
}
@media screen and (min-width: 1024px) {
.t-top-opencampus__inner {
padding: 110px 0 100px;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.t-top-opencampus__inner {
padding: 100px 0 90px;
}
}
@media screen and (max-width: 560px) {
.t-top-opencampus__inner {
padding: 70px 0 60px;
}
}
.t-top-opencampus__inner::before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 6px;
position: absolute;
top: 0;
left: 0;
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/opencampus_bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.t-top-opencampus__vertical {
display: flex;
align-items: center;
justify-content: center;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
text-orientation: upright;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-weight: 700;
line-height: 1;
letter-spacing: 0.25em;
}
@media screen and (min-width: 1024px) {
.t-top-opencampus__vertical {
width: 98px;
font-size: 22px;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.t-top-opencampus__vertical {
width: 50px;
font-size: 12px;
}
}
@media screen and (max-width: 560px) {
.t-top-opencampus__vertical {
width: 26px;
font-size: 10px;
}
}
.t-top-opencampus__main {
position: relative;
z-index: 2;
flex: 1;
}
@media screen and (min-width: 1024px) {
.t-top-opencampus__main {
height: 594px;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.t-top-opencampus__main {
height: 400px;
}
}
@media screen and (max-width: 560px) {
.t-top-opencampus__main {
height: 250px;
}
}
.t-top-opencampus__main h2 {
width: 100%;
position: absolute;
left: 0;
z-index: 1;
}
@media screen and (min-width: 1024px) {
.t-top-opencampus__main h2 {
top: -70px;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.t-top-opencampus__main h2 {
margin-top: -60px;
}
}
@media screen and (max-width: 560px) {
.t-top-opencampus__main h2 {
margin-top: -40px;
}
}
.t-top-opencampus__visual {
height: 100%;
overflow: hidden;
}
.t-top-opencampus__visual div {
width: 100%;
height: calc(100% + 100px);
margin-top: -50px;
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/tetote/activity01.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.t-top-opencampus__btn {
width: 96%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 0;
}
@media screen and (max-width: 560px) {
.t-top-opencampus__visual div {
background-size: 100%;
}
.t-top-opencampus__btn a {
font-size: 12px !important;
}
}
@media screen and (max-width: 320px) {
.t-top-opencampus__btn a {
font-size: 10px !important;
}
}
.c-opencampus {
text-align: center;
line-height: 1;
}
.c-opencampus::before {
content: "";
display: block;
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/opencampus_title.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 1024px) {
.c-opencampus::before {
width: 264px;
height: 100px;
margin: 0 auto;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.c-opencampus::before {
width: 210px;
height: 80px;
margin: 0 auto;
}
}
@media screen and (max-width: 560px) {
.c-opencampus::before {
width: 140px;
height: 54px;
margin: 0 auto;
}
}
.c-opencampus span {
display: block;
text-transform: uppercase;
white-space: nowrap;
}
.c-opencampus__title,
.c-opencampus__year {
font-family: DINNextLTPro-Medium;
}
.c-opencampus__year {
letter-spacing: -0.01em;
margin-bottom: 10px;
}
@media screen and (min-width: 1024px) {
.c-opencampus__year {
font-size: 61px;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.c-opencampus__year {
font-size: 40px;
}
}
@media screen and (max-width: 560px) {
.c-opencampus__year {
font-size: calc(10px + 5vw);
margin-bottom: 10px;
}
}
.c-opencampus__title {
letter-spacing: -0.01em;
}
@media screen and (min-width: 1024px) {
.c-opencampus__title {
font-size: 80px;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.c-opencampus__title {
font-size: 50px;
}
}
@media screen and (max-width: 560px) {
.c-opencampus__title {
font-size: calc(10px + 6vw);
}
}
.c-opencampus__name {
letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px) {
.c-opencampus__name {
font-size: 19px;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
.c-opencampus__name {
font-size: 13px;
}
}
@media screen and (max-width: 560px) {
.c-opencampus__name {
font-size: 12px;
}
}
.c-opencampus--shadow .c-opencampus__title,
.c-opencampus--shadow .c-opencampus__year {
text-shadow: 0 0 11px rgba(255, 255, 255, 0.75);
}
.news_img {
text-align: center;
height: 180px;
}
.news_img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.contact_tbl {
margin-top: 50px;
}
.contact table {
width: 100%;
}
.contact table th {
text-align: left;
padding: 24px 10px;
background: #f2f2f2;
border: 1px solid #ccc;
width: 300px;
vertical-align: top;
position: relative;
}
.contact table th label {
font-weight: normal;
display: inline-block;
color: #fff;
background-color: #8bd25f;
position: absolute;
top: 24px;
right: 10px;
padding: 3px 6px 2px;
border-radius: 3px;
font-size: 84%;
}
.contact table td {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
.contact table td input,
.contact table td select {
width: 100%;
height: 54px;
border: 1px solid #ccc;
padding: 10px;
background: #fff;
box-sizing: border-box;
}
.contact table td input[type="radio"] {
width: 18px;
height: 18px;
}
.contact table td .flex {
display: flex;
}
.contact table td textarea {
width: 100%;
height: 120px;
border: 1px solid #f2f2f2;
padding: 10px;
background: #fff;
box-sizing: border-box;
}
@media only screen and (max-width: 800px) {
.footer_right {
text-align: left;
}
.contact table th {
width: 100%;
display: block;
border-bottom: none;
padding: 10px;
}
.contact table td {
width: 100%;
display: block;
}
.contact table td input,
.contact table td select {
height: 32px;
padding: 5px;
}
.contact table th label {
top: 10px;
}
}
.contact_privacy {
text-align: center;
margin-top: 20px;
}
.contact_privacy a {
text-decoration: underline;
}
.submit {
text-align: center;
}
.submit input {
color: #fff;
border: none;
border-radius: 10px;
padding: 15px 0;
width: 200px;
margin-top: 20px;
}
.contact_img {
text-align: center;
margin-bottom: 20px;
}
.contact_img img {
max-width: 480px;
width: 80%;
}
.contact_header {
text-align: center;
}
.single_content {
margin-top: 50px;
}
.single_thumbnail {
text-align: center;
}
.single_thumbnail img {
height: auto;
}
.ques-box {
font-size: 18px;
font-weight: bold;
padding: 30px 55px 30px 80px;
position: relative;
border: solid 1px #f2994a;
} .scroll {
position: absolute;
right: 90%;
top: 0%;
writing-mode: vertical-rl;
margin-top: 500px;
position: fixed;
z-index: 10000;
}
@media screen and (min-width: 1024px) {
.scroll {
top: 25%;
}
} .scroll::before {
animation: scroll 2s infinite;
background-color: #000;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
z-index: 2;
} .scroll::after {
background-color: #ccc;
bottom: -115px;
content: "";
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
} @keyframes scroll {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
51% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
}
.profile_content p {
text-align: left;
}
.question-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
text-align: center;
margin-bottom: 30px;
}
.question-title::before,
.question-title::after {
content: "";
width: 70px;
height: 3px;
background-color: #e3bf00;
}
.question-title::before {
margin-right: 20px;
}
.question-title::after {
margin-left: 20px;
} .vertical {
animation: vertical_7592 2.44s ease infinite;
transform-origin: 50% 50%;
}
@keyframes vertical_7592 {
0% {
transform: translate(0, -3px);
}
3.27869% {
transform: translate(0, 3px);
}
6.55738% {
transform: translate(0, -3px);
}
9.83606% {
transform: translate(0, 3px);
}
13.11475% {
transform: translate(0, -3px);
}
16.39344% {
transform: translate(0, 3px);
}
18.03279% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
} @media screen and (min-width: 768px) {
.movie {
padding-top: 5px;
}
}
.movie__inner {
padding-left: 15px;
padding-right: 15px;
}
.movie__iframe iframe {
width: 345px;
max-width: 100%;
height: auto;
aspect-ratio: 345/194;
vertical-align: top;
}
@media screen and (min-width: 768px) {
.movie__iframe iframe {
width: 800px;
aspect-ratio: 640/360;
}
}
.page-id-277 .header {
display: none;
} .mv {
border-radius: 20px;
max-width: calc(100% - 30px);
margin-left: auto;
margin-right: auto;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#f8b819),
to(#f0d320)
);
background-image: linear-gradient(
to right,
#f78ca0 0%,
#f9748f 19%,
#fd868c 60%,
#fe9a8b 100%
);
}
@media screen and (min-width: 768px) {
.mv {
border-radius: 30px;
max-width: calc(100% - 60px);
}
}
.mv__inner {
padding: 50px 20px 255px;
position: relative;
}
@media screen and (min-width: 768px) {
.mv__inner {
padding-top: 110px;
padding-bottom: 109px;
padding-left: 30px;
padding-right: 30px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
}
.mv__lead1,
.mv__lead2 {
-webkit-font-feature-settings: "palt" on;
font-feature-settings: "palt" on;
font-size: 22px;
font-weight: 700;
line-height: 1;
letter-spacing: 2.2px;
border-radius: 5px;
background: #fff;
padding: 10px;
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 768px) {
.mv__lead1,
.mv__lead2 {
margin-left: 0;
margin-right: 0;
font-size: 38px;
letter-spacing: 3.8px;
padding: 12px 16px;
}
}
.mv__lead2 {
margin-top: 8px;
}
@media screen and (min-width: 768px) {
.mv__lead2 {
margin-top: 14px;
}
}
.mv__description {
text-align: center;
letter-spacing: 0.48px;
font-weight: 700;
margin-top: 26px;
}
@media screen and (min-width: 768px) {
.mv__description {
text-align: left;
font-size: 18px;
letter-spacing: 0.54px;
margin-top: 20px;
}
}
.mv__button {
margin-top: 22px;
text-align: center;
}
@media screen and (min-width: 768px) {
.mv__button {
text-align: left;
margin-top: 30px;
}
}
.mv__image {
position: absolute;
right: 0;
bottom: -108px;
width: 100%;
text-align: center;
}
@media screen and (min-width: 768px) {
.mv__image {
width: 57.6923076923%;
text-align: right;
bottom: -88px;
right: 30px;
}
}
.mv__image img {
width: 500px;
}
@media screen and (min-width: 768px) {
.mv__image img {
width: 800px;
}
} .movie {
padding-bottom: 60px;
height: 100%;
background-position: center;
background-size: cover;
position: relative;
}
@media screen and (min-width: 768px) {
.movie {
padding-bottom: 100px;
height: 600px;
}
}
.movie__inner {
padding-left: 15px;
padding-right: 15px;
}
.movie__iframe {
margin-top: 32px;
text-align: center;
}
@media screen and (min-width: 768px) {
.movie__iframe {
margin-top: 56px;
}
}
.movie__iframe iframe {
width: 345px;
max-width: 100%;
height: auto;
aspect-ratio: 345/194;
vertical-align: top;
}
@media screen and (min-width: 768px) {
.movie__iframe iframe {
width: 640px;
aspect-ratio: 640/360;
}
} .how-to-use {
padding-top: 150px;
padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
.how-to-use {
padding-top: 100px;
padding-bottom: 100px;
}
}
.how-to-use__boxes {
margin-top: 104px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 112px;
}
@media screen and (min-width: 768px) {
.how-to-use__boxes {
margin-top: 110px;
gap: 75px;
}
}
.how-to-use__box {
border-radius: 30px;
background: #fffbf0;
padding: 54px 40px 48px;
}
@media screen and (min-width: 768px) {
.how-to-use__box {
border-radius: 40px;
padding: 44px 10px 56px;
}
}
.how-to-use__box-title {
text-align: center;
font-size: 18px;
font-weight: 700;
letter-spacing: 1.8px;
position: relative;
}
@media screen and (min-width: 768px) {
.how-to-use__box-title {
font-size: 22px;
letter-spacing: 2.2px;
padding-right: 95px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
}
.how-to-use__box-title img {
width: 85px;
position: absolute;
right: 50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
bottom: calc(100% + 16px);
}
@media screen and (min-width: 768px) {
.how-to-use__box-title img {
right: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
bottom: 0;
}
}
@media screen and (min-width: 768px) {
.is-type2 .how-to-use__box-title {
padding-right: 0;
}
.is-type2 .how-to-use__box-title img {
right: auto;
}
}
.how-to-use__steps {
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}
@media screen and (min-width: 768px) {
.how-to-use__steps {
margin-top: 40px;
max-width: 948px;
margin-left: auto;
margin-right: auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 24px;
}
}
@media screen and (min-width: 768px) {
.how-to-use__step {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
.step-box {
padding-top: 45px;
position: relative;
}
.step-box__head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 90px;
height: 90px;
border-radius: 50%;
border: 3px solid #111;
background: #ff97c2;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.is-type2 .step-box__head {
background-color: #fabe00;
}
.step-box__head-text {
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 100%;
letter-spacing: 1.3px;
}
.step-box__head-number {
font-family: "Montserrat", sans-serif;
font-size: 34px;
font-weight: 700;
line-height: 100%;
letter-spacing: 3.4px;
color: #fff;
margin-top: 3px;
}
.step-box__body {
border-radius: 30px;
border: 3px solid #111;
background: #fff;
padding: 47px 10px 23px;
text-align: center;
}
.step-box__image img {
width: 160px;
}
@media screen and (min-width: 768px) {
.step-box__image img {
width: 200px;
}
}
.step-box__text {
font-weight: 700;
letter-spacing: 0.48px;
margin-top: 10px;
}
.heading-user {
text-align: center;
font-family: "Montserrat", sans-serif;
}
.inner-user {
padding-left: 15px;
padding-right: 15px;
}
@media screen and (min-width: 768px) {
.inner-user {
padding-left: 30px;
padding-right: 30px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
.how-to-title {
text-align: center;
font-size: 20px;
color: #ee4a8a;
}
.slash {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.slash::before,
.slash::after {
content: "";
width: 25px;
height: 1px;
background-color: #000;
margin: 0px 4px 4px;
}
.slash::before {
transform: rotate(45deg);
}
.slash::after {
transform: rotate(-45deg);
}
.app-icon-img {
width: 100%;
margin-top: 50px;
}
.app-icon {
display: block;
display: flex;
justify-content: center;
gap: 20px;
}
.btn-icon2 img {
margin-top: 20px;
width: 150px;
}
@media screen and (min-width: 768px) {
.btn-icon2 img {
width: 300px;
gap: 20px;
}
}
.how-to-app-text {
text-align: center;
font-size: 14px;
margin-top: 10px;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.how-to-app-text {
text-align: center;
font-size: 14px;
margin-top: 10px;
}
}
.how-to-use__box-title img {
width: 150px;
height: 150px;
position: absolute;
right: 50%;
transform: translateX(50%);
bottom: calc(100% + 16px);
}
@media screen and (min-width: 768px) {
.how-to-use__box-title img {
width: 150px;
height: 150px;
right: 0;
transform: translateX(0);
bottom: 0;
}
}
.merit {
padding-top: 60px;
padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
.merit {
padding-top: 100px;
padding-bottom: 98px;
}
}
.how-to-icon {
width: 30%;
}
@media (min-width: 768px) {
.how-to-icon {
width: 10%;
}
}
.dw-btn {
text-align: center;
}
@media (min-width: 768px) {
.dw-btn {
text-align: left;
}
}
.faq {
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
}
.faq_one {
margin-bottom: 30px;
background: #fff;
}
.faq_one:last-child {
margin-bottom: 0;
}
.ques {
font-size: 18px;
font-weight: bold;
padding: 30px 55px 30px 80px;
position: relative;
}
.ques:before {
content: "Q";
font-family: DINNextLTPro-Medium;
font-size: 40px;
color: #d6761e;
position: absolute;
font-weight: normal;
left: 30px;
top: 20px;
}
.ques:after {
content: "";
position: absolute;
right: 20px;
width: 31px;
height: 31px;
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/support/plus.png) no-repeat;
background-size: contain;
background-position: center;
top: 30px;
}
.active .ques:after {
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/support/minus.png);
}
.ans {
display: none;
border-top: 2px solid #f2f2f2;
padding: 30px 55px 30px 80px;
position: relative;
}
.ans:before {
content: "A";
font-family: DINNextLTPro-Medium;
font-size: 40px;
color: #333;
position: absolute;
font-weight: normal;
left: 30px;
top: 20px;
}
.fixed_bottom {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
padding: 25px 10px;
background: linear-gradient(to bottom, #ffbb1e, #ff9158);
writing-mode: vertical-rl;
text-orientation: upright;
color: #fff;
text-align: center;
display: flex;
align-items: center;
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
z-index: 3;
}
.fixed_bottom:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background-image: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/css/../img/bg_pattern.png);
background-size: 100px 100px;
background-repeat: repeat;
background-position: center;
opacity: 0.2;
} @media screen and (max-width: 768px) {
.fixed_bottom {
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: none;
writing-mode: horizontal-tb;
text-orientation: initial;
justify-content: center;
font-size: 16px;
padding: 12px 0;
width: 100%;
background: linear-gradient(to right, #ffbb1e, #ff9158);
border-top: 2px solid rgba(255, 255, 255, 0.4);
}
.fixed_bottom img {
width: 24px;
margin-right: 8px;
}
.fixed_bottom span {
display: inline-block;
vertical-align: middle;
}
}
.breadcrumb {
font-size: 14px;
margin-bottom: 20px;
}
.breadcrumb a {
color: #ff9158;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb span {
margin: 0 5px;
color: #555;
}.fv_img {
position: absolute;
left: 50px;
bottom: 25px;
} .tetote_btn {
display: inline-block;
padding: 20px 100px;
border-radius: 40px;
font-size: 19px;
font-weight: bold;
position: relative;
background: linear-gradient(90deg, #ffbb1e, #ff9158);
color: #fff;
width: 400px;
height: 60px;
}
.tetote_btn span {
display: inline-block;
position: absolute;
padding: 5px 20px;
border-radius: 30px;
border: 1px solid rgb(255, 122, 0);
color: #333;
font-size: 18px;
background-color: #fff;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
}
.tetote_sub {
display: inline-block;
padding: 15px 40px;
border-radius: 40px;
font-size: 17px;
font-weight: bold;
position: relative;
background: #fff;
border: 3px solid #ff9158;
color: #ff9158;
margin-top: 20px;
margin-bottom: 40px;
width: 400px;
height: 60px;
} .nayami {
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/css/../img/tetote/nayami-back.png)
no-repeat;
background-position: center;
background-size: cover;
text-align: center;
}
.nayami_img {
margin-bottom: 0;
}
.nayami h4 span {
padding: 10px 50px;
}
.nayami h4 span {
padding: 10px 25px;
background: #787878;
font-size: 24px;
color: #fff;
}
.nayami h3 {
font-size: 36px;
color: #ff9158;
margin-top: 30px;
}
.change_header_img {
text-align: center;
}
.soudan {
max-width: 800px;
margin: 200px auto 0;
padding: 80px;
position: relative;
}
.soudan h2 {
position: absolute;
left: 0;
top: -80px;
text-align: center;
width: 100%;
}
.soudan .left_ttl,
.soudan .right_ttl {
position: absolute;
top: 50%;
height: 100%;
text-align: center;
transform: translateY(-50%);
font-size: 20px;
font-weight: bold;
color: #fff;
writing-mode: vertical-rl;
text-orientation: upright;
}
.soudan .left_ttl {
left: 24px;
}
.soudan .right_ttl {
right: 24px;
}
.soudan_btn {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
} @media screen and (max-width: 768px) {
.tetote_btn {
width: 300px;
}
.nayami h4 span {
padding: 10px;
display: block;
font-size: 14px;
}
.nayami h3 {
font-size: 20px;
margin-top: 10px;
}
.tetote_sub {
width: 300px;
}
.soudan {
padding: 30px;
margin-top: 100px;
}
.soudan .left_ttl {
font-size: 12px;
left: 3px;
}
.soudan .right_ttl {
font-size: 12px;
right: 3px;
}
.soudan h2 {
top: -50px;
}
.soudan h2 img {
height: 72px;
}
.soudan_btn {
bottom: -20px;
}
} .tetote_back {
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/css/../img/tetote/back.png)
no-repeat;
background-size: cover;
background-position: center;
}
.banner2 {
background-color: #efeeea;
}
.banner2 {
text-align: center;
} .reason .fixedcontainer {
background: url(https://www.tetote.jyusen-t.com/wp-content/themes/jyusen/img/konet/ttl-back.png)
no-repeat;
background-size: contain;
background-position: top;
}
.expert .title {
margin-bottom: 0;
}
.reason_one {
padding: 120px 0 50px;
position: relative;
margin-bottom: 80px;
}
.reason_one:last-child {
margin-bottom: 0;
}
.reason_one::before {
position: absolute;
content: "";
left: calc(540px - 50vw);
bottom: 0;
width: calc(50vw + 400px);
height: calc(100% - 60px);
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/back4.png)
no-repeat;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.reason_one::before {
width: calc(50vw + 200px);
}
}
.reason_img {
position: absolute;
left: 0;
top: 0;
width: 540px;
z-index: 1;
}
.reason_content {
margin-left: 440px;
width: 640px;
padding: 50px;
background-color: #fff;
position: relative;
z-index: 2;
min-height: 320px;
border: 1px solid #f2f2f2;
box-shadow: 0 12px 12px 0 rgba(40, 47, 60, 0.3);
border-radius: max(10px, min(15px, calc((100vw - 10px - 100%) * 9999)));
}
@media screen and (max-width: 960px) {
.reason_content {
width: 440px;
}
.tetote_back {
padding-bottom: 250px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.reason_content {
margin-left: 300px;
width: 440px;
padding: 30px;
}
}
.reason_num {
position: absolute;
left: 50px;
top: -32px;
color: #ff9158;
font-family: "Homemade Apple", cursive;
font-size: 24px;
}
.reason_num span {
font-family: DINNextLTPro-Medium;
font-size: 48px;
margin-left: 5px;
}
.reason_ttl {
font-size: 30px;
margin-bottom: 20px;
}
.reason_txt {
line-height: 2;
}
.reason_one.reserve .reason_img {
right: 0;
left: auto;
}
.reason_one.reserve .reason_content {
margin-left: 0;
}
.reason_one.reserve::before {
left: auto;
right: calc(540px - 50vw);
} .function {
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/css/../img/back.jpg)
no-repeat;
background-size: cover;
background-position: center;
}
.function_in {
padding: 50px;
position: relative;
border: 5px dashed #ff9158;
background-color: #fff;
box-shadow: 0 12px 12px 0 rgba(40, 47, 60, 0.3);
border-radius: max(10px, min(15px, calc((100vw - 10px - 100%) * 9999)));
}
.function_icon {
position: absolute;
right: 0;
top: -5px;
transform: translateY(-100%);
}
.function_one {
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}
.function_one:last-child {
margin-bottom: 0;
}
.function_content {
width: 430px;
}
.function_img {
width: 480px;
margin: 0 auto;
}
.function_num {
font-size: 24px;
margin-bottom: 40px;
line-height: 1;
}
.function_num span {
font-family: DINNextLTPro-Medium;
font-size: 48px;
margin-left: 5px;
}
.function_ttl {
font-size: 38px;
margin-bottom: 30px;
color: #ff9158;
}
.function_one:nth-child(2n-1) {
flex-direction: row-reverse;
} .merit_one {
display: flex;
margin-bottom: 50px;
}
.merit_img {
width: 450px;
}
.merit_img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.merit_content {
color: #fff;
padding: 50px;
width: 630px;
}
.merit_num {
font-family: "Homemade Apple", cursive;
font-size: 24px;
line-height: 1;
margin-bottom: 30px;
}
.merit_num span {
font-family: DINNextLTPro-Medium;
font-size: 48px;
margin-left: 5px;
}
.merit_ttl {
font-size: 24px;
margin-bottom: 20px;
}
.merit_one:nth-child(2n) {
flex-direction: row-reverse;
} .tetote_contact .fixedcontainer {
background: url(https://www.tetote.jyusen-t.com/wp-content/themes/jyusen/img/konet/ttl-back.png)
no-repeat top / contain;
margin-bottom: 60px;
}
.device_in {
border: 5px dashed #ff9158;
padding: 70px;
text-align: center;
box-shadow: 0 12px 12px 0 rgba(40, 47, 60, 0.3);
border-radius: max(10px, min(15px, calc((100vw - 10px - 100%) * 9999)));
}
.device_in > h2 {
font-size: 30px;
margin-bottom: 20px;
}
.device_in > h3 {
font-size: 40px;
color: #ff9158;
margin-bottom: 20px;
}
.device_in > h3 > span {
font-size: 56px;
}
.device_list {
margin-top: 30px;
display: flex;
justify-content: space-around;
} @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { }
@media screen and (max-width: 768px) {  .reason_img {
position: initial;
width: 100%;
}
.reason_one:before {
content: none;
}
.reason_content {
margin: 0;
width: 100%;
min-height: auto;
}
.fv_content {
position: initial;
padding: 10vw 5vw 30px;
}
.fv_content h3 {
font-size: 16px;
}
.fv_content h1 {
font-size: 20px;
}
.fv_content h2 {
margin-bottom: 10px;
}
.fv_content p {
font-size: 16px;
}
.fv_back {
position: initial;
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.fv_img {
width: 100px;
left: 20px;
bottom: 10px;
}
.fv {
height: auto;
}
.tetote_btn span {
font-size: 14px;
}
.tetote_btn {
padding: 20px 40px;
font-size: 16px;
}
.nayami h4 span {
display: inline-block;
}
.feature_one {
padding: 20px;
}
.feature_num {
font-size: 10px;
}
.change_content h4 {
font-size: 14px;
}
.change_content h5 {
font-size: 16px;
}
.change_list li {
padding: 20px 5px;
}
.change_list li p {
font-size: 12px;
margin-bottom: 10px;
}
.change_imgs {
margin-top: 10px;
}
.message h3 {
margin-right: 100px;
}
.reason_one {
padding: 0;
margin-bottom: 30px;
}
.reason_content {
border: none;
padding: 20px;
}
.reason_num {
left: 20px;
top: 20px;
transform: translateY(-80%);
}
.reason_ttl {
font-size: 20px;
margin-bottom: 10px;
}
.function_icon {
width: 100px;
display: none;
}
.function_in {
padding: 20px;
border-width: 3px;
}
.function_one {
display: block;
margin-bottom: 40px;
}
.function_content {
width: 100%;
}
.function_img {
width: 100%;
margin-top: 20px;
}
.function_num {
margin-bottom: 20px;
}
.function_ttl {
font-size: 19px;
margin-bottom: 15px;
}
.merit_header {
min-height: 260px;
}
.merit_header img {
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
}
.merit_one {
display: block;
margin-bottom: 30px;
}
.merit_img {
width: 100%;
}
.merit_content {
width: 100%;
padding: 20px;
}
.merit_num {
margin-bottom: 15px;
}
.merit_ttl {
margin-bottom: 10px;
font-size: 20px;
}
.function_list_in {
display: block;
}
.function_list_in table {
width: 100%;
}
.function_list_in table th {
font-size: 16px;
padding: 10px;
width: 120px;
}
.function_list_in table td {
padding: 10px;
}
.device_in {
border-width: 3px;
padding: 20px;
}
.device_in > h2 {
font-size: 20px;
margin-bottom: 5px;
line-height: 1.5;
}
.device_in > h3 {
font-size: 24px;
}
.device_in > h3 > span {
font-size: 30px;
}
.device_list {
display: block;
}
.device_one {
margin-top: 20px;
}
.logo img {
width: 100px;
}
} .line-box {
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
color: white;
}
.line-text {
text-align: center;
}
.line-box p {
text-align: center;
}
.line-inner {
background-color: #00b900;
width: 350px;
height: 120px;
margin: auto;
border-radius: 20px;
}
.line-btn {
background-color: white;
width: 180px;
height: 30px;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
padding-top: 4px;
color: #00b900;
text-align: center;
}
.catch {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-weight: bold;
color: white;
margin-top: 15px;
text-align: center;
}
.catch:before,
.catch:after {
border-top: 1px solid;
content: "";
width: 1em;
}
.catch:before {
margin-right: 1em;
}
.catch:after {
margin-left: 1em;
} .br-sp {
display: none;
}
@media (max-width: 600px) {
.br-sp {
display: block;
}
}
.vertical {
animation: vertical_7592 2.44s ease infinite;
transform-origin: 50% 50%;
}
@keyframes vertical_7592 {
0% {
transform: translate(0, -3px);
}
3.27869% {
transform: translate(0, 3px);
}
6.55738% {
transform: translate(0, -3px);
}
9.83606% {
transform: translate(0, 3px);
}
13.11475% {
transform: translate(0, -3px);
}
16.39344% {
transform: translate(0, 3px);
}
18.03279% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
.fuwafuwa {
-webkit-animation: fuwafuwa 3s infinite linear alternate;
animation: fuwafuwa 3s infinite linear alternate;
}
@-webkit-keyframes fuwafuwa {
0% {
-webkit-transform: translate(0, 0) rotate(-5deg);
}
50% {
-webkit-transform: translate(0, -5px) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(5deg);
}
}
@keyframes fuwafuwa {
0% {
transform: translate(0, 0) rotate(-5deg);
}
50% {
transform: translate(0, -5px) rotate(0deg);
}
100% {
transform: translate(0, 0) rotate(5deg);
}
} .guidance-text {
text-align: center;
margin-top: 30px;
}
@media (max-width: 600px) {
.guidance-text {
text-align: left;
}
} .movie h2 {
text-align: center;
margin: auto;
margin-bottom: 15px;
}
.movie h1 {
font-size: 40px;
text-align: center;
margin-top: 50px;
}
.movie__inner {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
padding: 0 5px;
}
.cont {
text-align: center;
margin-bottom: 40px;
} .voice-text p {
border-bottom: 3px dashed #ffb300;
padding-bottom: 20px;
margin-bottom: 20px;
}
.heading04 {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
.heading04::before,
.heading04::after {
content: "";
width: 3px;
height: 20px;
background-color: #3fc1c9;
}
.heading04::before {
margin-right: 30px;
transform: rotate(-35deg);
}
.heading04::after {
margin-left: 30px;
transform: rotate(35deg);
}
.mb-30 {
margin-top: 40px;
}
@media screen and (max-width: 960px) {
.mb-30 {
margin-top: 20px;
}
} @media screen and (max-width: 960px) {
.fixedcontainer-top {
display: none;
}
.tabs-title {
display: none;
}
} .fixedcontainer-top {
width: 60%;
margin: 150px auto 0;
}
.features-mobil-second {
display: none;
}
@media screen and (max-width: 520px) {
.features-mobil-second {
display: block;
}
}
.features-mobil {
display: none;
}
@media screen and (max-width: 960px) {
.features-mobil {
display: block;
margin-bottom: 200px;
height: 650px;
}
}
@media screen and (max-width: 520px) {
.features-mobil {
margin-bottom: 150px;
height: 350px;
}
} .voice-name {
width: 100%;
text-align: left;
justify-content: center;
padding-bottom: 5px;
font-size: 14px;
}
.voice-name2 {
border-bottom: 3px dashed #ffb300;
width: 400px;
margin: 60px auto 0;
text-align: center;
display: flex;
justify-content: center;
font-size: 30px;
}
@media screen and (max-width: 960px) {
.voice-name2 {
font-size: 19px;
width: 250px;
padding-top: 20px;
}
}
.mb-100 {
margin-top: 130px;
}
.voice-text {
margin-top: 10px;
}
.advisor-box {
top: 0;
left: 0;
color: #fff;
text-align: center;
align-items: center;
border-radius: 5px;
width: 130px;
height: 30px;
background: orange;
padding: 3px;
margin: 10px 0 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
margin-left: 10px;
} .voice-img img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.single-voice-img img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 20px;
margin: 0 auto 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
@media screen and (max-width: 520px) {
.voice-img img,
.single-voice-img img {
height: 200px;
}
} .voice-outer {
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 0 20px;
}
.voice-outer h1 {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.voice-outer h3 {
margin-bottom: 20px;
} .voice-before,
.voice-after,
.voice-thoughts {
margin: 1em 0 30px;
padding: 2.5em 1em 1em;
position: relative;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.voice-before {
border: 1px solid #f5bc42;
background-color: #fff4e3;
}
.voice-after {
border: 1px solid #eb5e6b;
background-color: #fff5f6;
}
.voice-thoughts {
border: 1px solid #00bbdd;
background-color: #f6feff;
}
.voice-before-title,
.voice-after-title,
.voice-thoughts-title {
position: absolute;
top: -0.8em;
left: 20px;
border-radius: 5px;
font-weight: bold;
font-size: 17px;
color: #fff;
padding: 0 0.5em;
}
.voice-before-title {
background-color: #f5bc42;
}
.voice-after-title {
background-color: #eb5e6b;
}
.voice-thoughts-title {
background-color: #00bbdd;
}
.voice-before p,
.voice-after p,
.voice-thoughts p {
margin: 0;
padding: 0;
}
.advisor-box-second {
top: 0;
left: 0;
color: #fff;
text-align: center;
border-radius: 5px;
width: 160px;
height: 30px;
background: #ffb300;
padding: 3px;
margin-top: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.text {
text-align: center;
margin-bottom: 10px;
} .work-box {
text-align: center;
margin-bottom: 50px;
}
.workplace {
position: relative;
display: inline-block;
color: #333;
text-align: center;
text-shadow: 0 0 2px white;
margin: 47px auto;
}
.workplace::before {
content: "";
position: absolute;
background: #ffd69d;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
} .voice-name2 {
margin-bottom: 30px;
} .button-line {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin: 30px auto 0;
padding: 0.9em 2em;
border: 2px solid #fff;
border-radius: 5px;
box-shadow: 0 0 0 3px #00b900;
background-color: #00b900;
color: #fff;
font-weight: 600;
font-size: 1em;
} .error-text,
.error-sub-text {
text-align: center;
color: red;
}
.error-sub-text {
margin-bottom: 50px;
}
.mb-50 {
margin-top: 20px;
margin-bottom: 25px;
} .main-btn-box {
display: block;
text-align: center;
margin: auto;
}
@media screen and (max-width: 960px) {
.main-btn-box {
padding-top: 30px;
}
} .fv-tetote {
width: calc(100% - 40px);
margin: auto;
position: relative;
text-align: center;
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/tetote/back.png) center/cover no-repeat;
}
.fv-tetote::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(90deg, #ffbb1e, #ff9158);
} .main-phone {
margin: auto;
padding-left: 20px;
}
.contact-title h2 {
margin-bottom: 50px;
}
.mainVisual {
display: flex;
}
.mainVisual-inner {
display: flex;
margin: 0 auto;
align-items: center;
text-align: center;
}
.mainVisual-text {
width: 600px;
}
.mainVisual-img img {
width: 700px;
height: auto;
}
@media screen and (max-width: 520px) {
.mainVisual-img img {
height: 350px;
}
} .price-sub {
padding: 0.5em 0.7em 0.5em 32px;
width: 300px;
margin: 10px auto 0;
border: 2px solid #ff9158;
box-shadow: 5px 5px #ff9158;
color: #ff9158;
} .sectionTitle4 {
font-size: 35px;
font-weight: 900;
text-align: center;
letter-spacing: 0.22em;
color: transparent;
-webkit-text-stroke: 0.5px #000;
text-shadow: 2px 2px #696969;
}
.sectionTitle5 {
font-size: 45px;
font-weight: 900;
text-align: center;
letter-spacing: 0.22em;
color: transparent;
-webkit-text-stroke: 0.5px #000;
text-shadow: 2px 2px #ff9158;
margin: 15px 0 0.2rem;
}
.sectionTitle5 span {
background: linear-gradient(transparent 60%, #fffe03 60%);
} .catchCopy-title-box {
margin-bottom: 80px;
}
.catchCopy-title {
font-size: 40px;
text-align: left;
padding-left: 50px;
font-weight: bold;
}
.catchCopy-subtitle {
font-size: 20px;
color: #ff9158;
font-weight: bold;
text-align: left;
padding-left: 50px;
}
.catchCopy {
position: relative;
width: 500px;
margin: 0 auto 30px;
font-size: 30px;
font-weight: bold;
color: #ff9158;
text-align: center;
}
.catchCopy span {
font-size: 80px;
color: #ff9158;
font-weight: bold;
}
.catchCopy::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
} .main-title p {
text-align: center;
font-size: 40px;
font-weight: bold;
}
.change-text {
text-align: center;
font-size: 40px;
margin: auto;
align-items: center;
}
.change-text p {
font-size: 18px;
}
.change-title {
display: flex;
padding: 30px 0 50px 0;
}
.change-img {
margin: auto;
text-align: center;
align-items: center;
}
.change-img img {
width: 497px;
} .change-absolute01 {
position: absolute;
right: 0;
bottom: 72.5%;
left: 63%;
width: 450px;
}
.change-absolute02 {
position: absolute;
right: 0;
bottom: 0;
left: 61%;
width: 450px;
}
.change-absolute03 {
position: absolute;
right: 0;
bottom: 44%;
left: 20%;
width: 200px;
}
.change-section {
position: relative;
} .flow {
padding: 100px 150px;
}
@media screen and (max-width: 1026px) {
.flow {
padding: 10px 30px 50px;
}
}
.flow_wrap {
display: flex;
justify-content: space-between;
}
.flow_one {
width: 320px;
padding: 40px 20px 20px;
background-color: #fff;
border: 1px solid #f26f78;
box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.1);
position: relative;
}
.flow_one::after {
content: "";
position: absolute;
right: -43px;
top: 50%;
width: 20px;
height: 26px;
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/hoikumate/arrow.svg) no-repeat center/contain;
transform: translateY(-50%);
}
.flow_one:last-child::after {
content: none;
} .flow > li {
position: relative;
}
.flow > li:not(:last-child) {
margin-bottom: 40px;
}
.flow > li:not(:first-child)::before {
content: "";
position: absolute;
top: -40px;
left: calc(10% + 30px - 2px);
height: 60px;
border-left: 4px dotted #e5e5e5;
display: block;
z-index: 10;
}
.flow > li dl {
display: flex;
align-items: center;
padding: 20px 30px;
border: 2px solid #ff9158;
border-radius: max(10px, min(15px, calc((100vw - 10px - 100%) * 9999)));
position: relative;
box-shadow: 0 12px 12px 0 rgba(40, 47, 60, 0.3);
}
@media screen and (max-width: 960px) {
.flow > li dl {
padding: 20px 10px;
}
}
.flow > li:not(:last-child) dl::before,
.flow > li:not(:last-child) dl::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: solid transparent;
}
.flow > li:not(:last-child) dl::before {
border-width: 22px;
border-top-color: #f2c94c;
}
.flow > li:not(:last-child) dl::after {
border-width: 20px;
border-top-color: #fff;
}
.flow > li dl dt {
flex-basis: 20%;
margin-right: 2vw;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #f2994a;
}
@media screen and (max-width: 960px) {
.flow > li dl dt {
font-size: 11px;
font-weight: bold;
}
}
.flow > li dl dt .icon {
display: block;
padding: 5px 10px;
margin-bottom: 10px;
font-size: 12px;
color: #fff;
background: linear-gradient(to bottom, #ffbb1e, #ff9158);
border-radius: 20px;
position: relative;
z-index: 100;
} .flow-sub {
display: flex;
justify-content: space-between;
padding: 0 100px;
}
@media screen and (max-width: 1026px) {
.flow-sub {
padding: 0 20px;
margin-bottom: 50px;
}
}
@media screen and (max-width: 520px) {
.flow-sub {
display: none;
}
}
.flow-sub > li {
flex-basis: 22%;
}
.flow-sub > li .icon {
display: block;
width: 50px;
margin: 0 auto 20px;
font-family: "Montserrat", sans-serif;
font-size: 18px;
line-height: 50px;
color: #fff;
text-align: center;
background: linear-gradient(to bottom, #ffbb1e, #ff9158);
border-radius: 50%;
letter-spacing: 2px;
position: relative;
}
.flow-sub > li .icon::before {
content: "";
position: absolute;
top: calc(100% - 2px);
left: 50%;
transform: translateX(-50%);
border: solid transparent;
border-width: 8px;
border-top-color: #ff9158;
}
.flow-sub > li dl {
padding: 30px 20px;
margin: 0;
border: 3px solid #ff9158;
border-radius: max(10px, min(15px, calc((100vw - 10px - 100%) * 9999)));
position: relative;
box-shadow: 0 12px 12px 0 rgba(40, 47, 60, 0.3);
}
.flow-sub > li:not(:last-child) dl::before {
content: "";
position: absolute;
top: calc(50% - 14px);
left: 104%;
width: 14px;
height: 14px;
display: inline-block;
border-top: 4px solid #f2994a;
border-right: 4px solid #f2994a;
transform: rotate(45deg);
}
.flow-sub > li dl dt {
flex-basis: 20%;
margin-bottom: 1vh;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #f2994a;
}
@media screen and (max-width: 900px) {
.flow-sub > li dl dt {
font-size: 14px;
}
}
.flow-img {
display: block;
margin: auto;
text-align: center;
}  .pc-main-btn-box {
display: none;
} @media screen and (max-width: 1024px) {
.change-img img {
width: 420px;
}
.fv_img {
left: 450px;
}
.heading04 {
font-size: 18px;
}
.fixedcontainer-top,
.fixedcontainer {
width: 90%;
}
.balloon_01 {
top: 44px;
left: calc(50% + 300px);
width: 150px;
}
.balloon_02 {
top: 67px;
left: calc(50% + 370px);
width: 100px;
}
.bird {
top: 400px;
left: 0;
width: 150px;
}
.change-absolute01 {
left: 57%;
bottom: 74.5%;
width: 400px;
}
} @media screen and (max-width: 960px) {
.change-absolute01 {
bottom: 69.5%;
width: 250px;
left: 73%;
}
.change-absolute02 {
width: 250px;
left: 64%;
}
.fv_img {
left: 10px;
}
.heading04 {
font-size: 15px;
}
.mainVisual-inner {
display: block;
}
.mainVisual-text {
width: 100%;
}
.change-title {
display: block;
}
.balloon_01,
.balloon_02,
.bird {
display: none;
}
.catchCopy-title-box {
margin-bottom: 0;
}
.change-img img {
width: 420px;
}
} @media screen and (max-width: 520px) {
.mainVisual-inner {
display: block;
}
.change-absolute01 {
right: 0;
left: 63%;
bottom: 78.5%;
width: 140px;
}
.change-absolute02 {
right: 0;
left: 61%;
bottom: 0;
width: 150px;
}
.mainVisual-img img {
width: 100%;
}
.catchCopy {
width: 100%;
margin-bottom: 10px;
font-size: 25px;
}
.pc-main-btn-box {
display: block;
}
.mainVisual-text {
width: 100%;
}
.sectionTitle4 {
margin-top: 20px;
font-size: 24px;
letter-spacing: 0.4em;
-webkit-text-stroke: 0;
}
.catchCopy-subtitle {
text-align: center;
font-size: 15px;
padding-left: 0;
margin-bottom: 3px;
}
.fv-tetote {
width: calc(100% - 40px);
}
.catchCopy span {
font-size: 58px;
}
.catchCopy-title {
font-size: 32px;
padding-left: 0;
}
.main-btn-box {
display: none;
}
.catchCopy-title-box {
margin-bottom: 0;
}
.fv_img {
display: none;
}
.sectionTitle5 {
margin-top: 10px;
font-size: 24px;
letter-spacing: 0.22em;
-webkit-text-stroke: 0;
text-shadow: 1.5px 1.4px #ff9158;
}
.movie h1 {
font-size: 27px;
}
.change-text p {
font-size: 12px;
}
.change-title {
display: block;
}
.heading04 {
font-size: 17px;
margin-bottom: 5px;
}
.change-img img {
width: 200px;
}
.menu-trigger {
display: block;
}
} .float-hover {
display: inline-block;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.float-hover:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
} .card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
padding: 1rem;
border-radius: 8px;
margin-bottom: 30px;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.icon {
font-size: 1.5rem;
}
.card span {
font-size: 0.95rem;
font-weight: 500;
color: #333;
text-align: center;
} .blue-bg {
background: linear-gradient(to bottom, #f5faff, #cce7ff);
}
.yellow-bg {
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
}
.green-bg {
background: linear-gradient(to bottom, #f0fff5, #b3e6cc);
}
.pink-bg {
background: linear-gradient(to bottom, #fff0f5, #f2a6bf);
}
.purple-bg {
background: linear-gradient(to bottom, #f9f5ff, #d1b3ff);
}
.orange-bg {
background: #fff2e5;
} .blue {
color: #1d4ed8;
}
.yellow {
color: #c27803;
}
.green {
color: #15803d;
}
.pink {
color: #ff9158;
}
.purple {
color: #6d28d9;
}
.orange {
color: #c2410c;
} .dots {
display: flex;
justify-content: center;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.dot1 {
background-color: #f7b267;
}
.dot2 {
background-color: #f79d65;
}
.dot3 {
background-color: #f47c3c;
} .guidance-text {
text-align: center;
margin-top: 30px;
}
@media (max-width: 600px) {
.guidance-text {
text-align: left;
}
}
.headline {
margin: 0;
text-align: center;
font-weight: 800;
letter-spacing: 0.02em;
font-size: clamp(28px, 8vw, 72px);
background: linear-gradient(transparent 60%, #fffe03 60%);
}
.headline .num {
font-weight: 900;
font-feature-settings: "tnum" 1, "pnum" 0;
font-size: 1.5em;
color: var(--accent);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
color: red;
}
.sub {
margin: clamp(8px, 1.2vw, 14px) 0 0;
text-align: center;
font-weight: 700;
letter-spacing: 0.02em;
font-size: clamp(14px, 2.2vw, 24px);
color: var(--muted);
}
@media (max-width: 768px) {
.headline {
font-size: 25px;
margin-top: 10px;
}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.headline {
font-size: 35px;
margin-top: 10px;
}
}
@media (max-width: 360px) {
.headline,
.sub {
letter-spacing: 0;
}
} .stepbar {
width: 80%;
margin: 0 auto;
text-align: center;
border-top: 1px solid #dedede;
}
.stepbar .triangle {
content: "";
display: block;
width: 0;
border: solid 1em transparent;
border-top-color: #dedede;
margin: 0 auto;
}
.steptitle,
.stepbar .steptitle span {
display: block;
font-weight: bold;
color: red;
font-size: 30px;
padding: 10px;
}
.stepbar .title {
font-size: 1.2em;
font-weight: bold;
}
.stepbar .txt {
width: 90%;
display: block;
margin: 2em auto;
font-size: 0.9em;
}
.stepbar:first-of-type .triangle:first-of-type {
display: none;
}
.stepbar:last-of-type .stepbarwrap:last-of-type {
border-bottom: 1px solid #dedede;
}
@media (max-width: 960px) {
.stepbar {
width: 90%;
}
} .list-4 {
border: 2px solid #f5a519;
margin: auto 0 10px;
width: 320px;
}
.list-4 div {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
background-color: #f5a519;
color: #fff;
font-weight: 600;
}
.list-4 ul {
list-style-type: disc;
padding: 1em 1em 1em 2.5em;
margin: 0;
}
.list-4 li {
padding: 0.3em 0;
text-align: left;
}
.list-4 li::marker {
color: #f5a519;
font-size: 1.1em;
}
.button-1,
.button-54,
.button-line {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin: 20px auto;
padding: 0.9em 2em;
font-size: 1em;
border-radius: 5px;
background-color: #fff;
}
.button-1 {
border: 1px solid #2589d0;
color: #2589d0;
}
.button-54 {
border: 1px solid red;
color: red;
position: relative;
margin-top: 30px;
}
.button-54::after {
content: "";
position: absolute;
right: 2em;
width: 2em;
height: 0.5em;
background-color: red;
clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
transition: transform 0.3s;
transform: translateY(-50%);
}
.button-54:hover::after {
transform: translateY(-50%) scaleX(1.4);
}
.button-line {
border: 2px solid #fff;
box-shadow: 0 0 0 3px #00b900;
background-color: #00b900;
color: #fff;
font-weight: 600;
} .mainVisual {
display: flex;
}
.mainVisual-inner {
display: flex;
align-items: center;
text-align: center;
margin: 0 auto;
}
.mainVisual-text {
width: 600px;
}
.mainVisual-img img {
width: 700px;
height: auto;
}
@media (max-width: 520px) {
.mainVisual-img img {
height: 350px;
}
}
@media (max-width: 960px) {
.mainVisual-inner {
display: block;
}
.mainVisual-text {
width: 100%;
}
}
.catchCopy {
font-size: 30px;
color: #ff9158;
font-weight: bold;
position: relative;
width: 500px;
margin: 0 auto 30px;
}
.catchCopy span {
font-size: 60px;
color: #ff9158;
font-weight: bold;
}
.catchCopy:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
@media (max-width: 520px) {
.catchCopy {
font-size: 25px;
width: 100%;
margin-bottom: 10px;
}
.catchCopy span {
font-size: 58px;
}
} .tab-outer {
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/css/../img/back.jpg)
no-repeat;
background-position: center;
background-size: cover;
position: relative;
padding: 20px 0 70px;
}
.bk-img {
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/tetote/bk-img.jpg) no-repeat center/cover;
}
.wrap {
max-width: var(--container);
margin-inline: auto;
margin-top: 50px;
}
.category-outer {
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/tetote/back.png) no-repeat center/cover;
position: relative;
}
.category h3 {
margin-bottom: 10px;
}
.tab-container {
display: flex;
gap: 24px;
flex-wrap: wrap;
align-items: flex-start;
}
.tabs {
display: flex;
flex-direction: column;
gap: 14px;
width: 260px;
flex-shrink: 0;
}
.tab {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease-in-out;
font-size: 15px;
}
.tab:hover {
background: #f7fbff;
}
.tab-icon {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
background: #ccc;
}
.tab.active {
border: 2px solid #4ca9ff;
font-weight: bold;
background: #f0f8ff;
}
.tab.active .tab-icon {
background: #4ca9ff;
}
.tab.active .tab-icon::before {
content: "✔";
font-size: 12px;
}
.tab-content {
flex: 1;
padding: 24px;
border-radius: 16px;
border: 1px solid #ddd;
min-height: 220px;
transition: background 0.3s ease-in-out;
}
.content-box {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.content-box.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tab-content img {
text-align: center;
margin: auto;
padding: 30px 0;
} .bg-tab1 {
background: linear-gradient(to bottom, #f5faff, #cce7ff);
}
.bg-tab2 {
background: linear-gradient(to bottom, #f0fff5, #b3e6cc);
}
.bg-tab3 {
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
}
.bg-tab4 {
background: linear-gradient(to bottom, #fff0f5, #f2a6bf);
}
.bg-tab5 {
background: linear-gradient(to bottom, #f9f5ff, #d1b3ff);
}
@media (max-width: 768px) {
.tab-container {
flex-direction: column;
}
.tabs {
flex-wrap: wrap;
width: 100%;
gap: 8px;
}
.tab-content {
margin-top: 16px;
}
.category h3 {
font-size: 20px;
}
} .message {
position: relative;
max-width: 800px;
margin: 100px auto 0;
padding: 60px 40px;
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/back5.png) center/cover no-repeat;
box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.1);
}
.message h2 {
position: absolute;
top: 0;
left: 40px;
transform: translateY(-50%);
font-size: 50px;
font-family: "Homemade Apple", cursive;
font-weight: normal;
line-height: 1.2;
color: #f26f78;
}
.message h3 {
font-size: 30px;
margin-bottom: 20px;
}
.message .img {
position: absolute;
}
.name {
margin-top: 20px;
text-align: right;
font-weight: bold;
}
.price .message {
padding: 40px;
margin-top: 0;
}
.price h4 {
font-size: 32px;
color: #f26f78;
margin-bottom: 13px;
}
.price h3 {
font-size: 28px;
margin-bottom: 10px;
}
.price p {
font-size: 14px;
}
.thought .message {
max-width: 1040px;
padding: 60px;
}
.message .img {
right: 0;
bottom: 0;
}
@media screen and (max-width: 768px) {
.message {
margin-top: 40px;
padding: 30px 20px 20px;
margin-left: 15px;
margin-right: 15px;
}
.message h2 {
font-size: 24px;
left: 20px;
}
.message h3 {
font-size: 20px;
margin-bottom: 10px;
}
.message .img { right: 20px;
bottom: auto;
top: 0;
margin-top: -30px;
width: 100px;
}
} .function-box {
max-width: 900px;
margin: auto;
padding: 10px 20px;
}
.function-box h3 {
font-size: 28px;
margin-bottom: 16px;
line-height: 1.6;
}
.function-box h3 span {
color: #ff7a00;
font-weight: bold;
}
.function-box p {
color: #555;
font-size: 16px;
line-height: 1.9;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.function-box {
padding: 30px 16px;
}
.function-box h3 {
font-size: 24px;
}
.function-box p {
font-size: 15px;
}
}
@media (max-width: 480px) {
.function-box {
padding: 24px 12px;
}
.function-box h3 {
font-size: 20px;
line-height: 1.5;
}
.function-box p {
font-size: 14px;
line-height: 1.7;
}
} .banner {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 900px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.banner-image {
flex: 1 1 300px;
position: relative;
text-align: center;
}
.banner-image img {
max-width: 300px;
width: 100%;
border-radius: 8px;
}
.badge {
position: absolute;
top: 10px;
left: 10px;
padding: 8px 12px;
background-color: orange;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
border-radius: 50%;
line-height: 1.2;
}
.banner-content {
flex: 2 1 400px;
padding: 20px;
}
.subtitle {
color: green;
font-weight: bold;
}
.banner-content h1 {
margin: 10px 0;
font-size: 1.5em;
}
.description {
margin-bottom: 20px;
color: #333;
}
button {
padding: 12px 24px;
background-color: #5ac900;
color: #fff;
font-size: 1em;
border: none;
border-radius: 24px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #49a400;
}
@media (max-width: 768px) {
.banner {
flex-direction: column;
text-align: center;
}
.banner-image,
.banner-content {
padding: 10px;
}
.banner-image img {
max-width: 100%;
}
.badge {
top: 5px;
left: 5px;
}
} .pricing-container {
display: flex;
justify-content: center;
gap: 30px;
width: 100%;
max-width: 1200px;
padding: 60px;
} .plan {
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
overflow: hidden;
box-sizing: border-box;
} .plan-header {
padding: 30px 20px;
text-align: center;
}
.plan-title {
margin: 0 0 10px;
}
.plan-name {
font-size: 2rem;
font-weight: 700;
}
.plan-subtitle {
display: block;
font-size: 0.8rem;
color: #888;
letter-spacing: 0.1em;
}
.plan-description {
margin: 10px 0;
font-size: 1.1rem;
font-weight: 400;
line-height: 1.6;
}
.plan-note {
margin-top: 5px;
font-size: 0.8rem;
color: #555;
} .plan-price {
padding: 20px;
text-align: center;
background-color: #f9f9f9;
}
.price-info {
margin: 0;
font-size: 1.2rem;
line-height: 1.5;
}
.price-amount {
font-weight: 700;
}
.large-text {
font-size: 2.5rem;
font-weight: 700;
}
.small-text {
font-size: 1.1rem;
}
.price-sub-info {
margin-top: 5px;
font-size: 0.9rem;
color: #555;
}
.tax-info {
font-size: 0.8rem;
color: #888;
} .contact-button {
display: block;
width: calc(100% - 40px);
margin: 20px auto;
padding: 15px 0;
font-size: 1rem;
font-weight: bold;
text-align: center;
border-radius: 5px;
} .feature-list {
padding: 20px;
}
.feature-heading {
margin: 20px 0 10px;
padding-left: 10px;
font-size: 0.9rem;
color: #777;
}
.feature-heading:first-child {
margin-top: 0;
}
.feature-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
font-size: 0.95rem;
color: #444;
border-bottom: 1px solid #eee;
}
.feature-item:last-child {
border-bottom: none;
}
.feature-item .arrow {
font-size: 1.1rem;
font-weight: bold;
color: #ccc;
}
.feature-item.disabled {
color: #ccc;
}
.feature-item.disabled .arrow {
color: #eee;
} .standard {
background-color: #eaf1e7;
}
.standard .plan-header {
background: linear-gradient(45deg, #70c8bf, #1aa7c7);
color: #fff;
border-radius: 15px 15px 0 0;
}
.standard .plan-subtitle {
color: #d1e6c3;
}
.standard .contact-button {
background-color: #70c8bf;
color: #fff;
}
.standard .contact-button:hover {
background-color: #1aa7c7;
} .plan.premium {
position: relative;
overflow: hidden;
}
.plan.premium::after {
content: "ただいまこちらは準備中";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 1.4rem;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
z-index: 10;
}
.plan.premium * {
pointer-events: none;
}
.premium {
position: relative;
background-color: #fce2c3;
}
.premium .plan-header {
background: linear-gradient(90deg, #ffbb1e, #ff9158);
color: #fff;
border-radius: 15px 15px 0 0;
}
.premium .plan-subtitle {
color: #ffe0b2;
}
.premium .contact-button {
background-color: #ffb74d;
color: #fff;
}
.premium .contact-button:hover {
background-color: #ffa726;
}
.premium .most-popular {
position: absolute;
top: 0;
right: 30px;
padding: 5px 15px;
background-color: #ff4081;
color: #fff;
font-size: 0.8rem;
font-weight: bold;
border-radius: 0 0 10px 10px;
transform: translateY(-100%);
} @media (max-width: 768px) {
.pricing-container {
flex-direction: column;
align-items: center;
gap: 20px;
padding: 10px;
}
.plan {
width: 100%;
max-width: 500px;
}
.plan-header {
padding: 20px 15px;
}
.plan-description {
font-size: 1rem;
}
.large-text {
font-size: 2rem;
}
.small-text {
font-size: 1rem;
}
.premium .most-popular {
right: 15px;
}
} .town-img {
width: 90%;
margin: 0 auto;
text-align: center;
}
@media screen and (min-width: 768px) {
.town-img {
width: 70%;
}
} .Instagram {
text-align: center;
}
.instagram-image {
width: 200px;
margin: 0 auto;
}
.Instagram__button {
margin-top: 16px;
} #contact-front {
display: flex;
justify-content: center;
align-items: center;
padding: 100px 30px;
background: url(//www.tetote.jyusen-t.com/wp-content/themes/jyusen-wp/img/tetote/activity01.jpg) no-repeat center;
background-size: cover;
color: #fff;
}
#contact-front h2 {
position: relative;
margin: 0 0 50px;
text-align: center;
font-size: 2rem;
}
#contact-front h2::after {
content: "";
position: absolute;
left: 40%;
bottom: -20px;
width: 15%;
height: 5px;
background: #fff;
}
#contact-front p {
margin: 0 0 50px;
text-align: center;
}
#contact-front .contact-detail br {
display: none;
}
@media screen and (max-width: 1090px) {
#contact-front h2 {
font-size: 1.5rem;
}
}
@media screen and (max-width: 600px) {
#contact-front .contact-detail h2 br {
display: block;
}
}
@media screen and (max-width: 400px) {
#contact-front .contact-detail h2 {
font-size: 1.3rem;
}
#contact-front .contact-detail p br {
display: block;
}
}
#contact-front ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#contact-front ul li {
padding: 0 20px 20px 0;
} .scroll-container {
width: 100%;
padding: 50px;
overflow: hidden;
}
.scroll-content {
display: flex;
animation: scroll 15s linear infinite;
}
.scroll-content img {
width: 450px;
height: auto;
flex-shrink: 0;
margin-right: 5px;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
} .helpdesk-section {
padding: 50px 20px;
text-align: center;
}
.helpdesk-title {
margin-bottom: 40px;
font-size: 1.8rem;
}
.helpdesk-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
}
.helpdesk-card {
flex: 1 1 280px;
max-width: 320px;
padding: 30px 20px;
background: #fff;
border-radius: 15px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(30px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: helpdesk-fadeInUp 0.8s forwards;
border: 5px dashed #ff9158;
}
.helpdesk-card:nth-child(1) {
animation-delay: 0.2s;
}
.helpdesk-card:nth-child(2) {
animation-delay: 0.4s;
}
.helpdesk-card:nth-child(3) {
animation-delay: 0.6s;
}
.helpdesk-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}
.helpdesk-icon img,
.helpdesk-icon svg {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.helpdesk-icon svg {
stroke: #ff9800;
}
.helpdesk-card-title {
margin-bottom: 15px;
font-size: 1.2rem;
color: #222;
}
.helpdesk-text {
font-size: 0.95rem;
line-height: 1.6;
text-align: left;
}
.helpdesk-footer {
margin-top: 50px;
padding: 30px;
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
border-radius: 15px;
}
.helpdesk-footer-title {
margin-bottom: 15px;
font-size: 1.2rem;
}
.helpdesk-footer-text {
margin-bottom: 20px;
font-size: 0.95rem;
}
.helpdesk-btn {
padding: 12px 25px;
background: #ff9800;
color: #fff;
font-size: 1rem;
border: none;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s ease;
}
.helpdesk-btn:hover {
background: #e68900;
}
@keyframes helpdesk-fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.helpdesk-container {
flex-direction: column;
align-items: center;
}
} .orange-contact-section {
padding: 50px 20px;
text-align: center;
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
}
.orange-contact-title {
margin-bottom: 80px;
font-size: 22px;
font-weight: bold;
color: #333;
}
.orange-contact-sub {
font-size: 16px;
font-weight: normal;
color: #ff7a00;
} .orange-contact-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.orange-contact-box {
width: 300px;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: visible;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.orange-contact-box:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 10px 20px rgba(255, 122, 0, 0.3);
}
.orange-contact-img {
width: 80%;
height: 150px;
margin-top: -85px;
margin-bottom: 15px;
border-radius: 8px;
}
.orange-contact-heading {
margin: 10px 0;
font-size: 18px;
color: #ff7a00;
}
.orange-contact-text {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.6;
color: #555;
text-align: left;
}
.orange-contact-btn {
display: inline-block;
padding: 12px 20px;
background: #ff7a00;
color: #fff;
font-weight: bold;
border-radius: 30px;
text-decoration: none;
transition: background 0.3s ease, transform 0.2s ease;
}
.orange-contact-btn:hover {
background: #e96a00;
transform: scale(1.05);
}
@media (max-width: 768px) {
.orange-contact-container {
flex-direction: column;
align-items: center;
}
.orange-contact-box {
margin-top: 50px;
}
} .download-section {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 40px;
padding: 40px;
margin: 0 auto;
border-radius: 12px;
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
}
.download-image img {
width: 400px;
height: auto;
border-radius: 8px;
}
.download-content {
max-width: 500px;
text-align: left;
}
.download-content h4 {
margin: 0 0 10px;
font-size: 18px;
color: #ff9158;
}
.download-content h2 {
margin: 0 0 15px;
font-size: 28px;
font-weight: bold;
line-height: 1.4;
}
.download-content p {
margin: 0 0 25px;
font-size: 16px;
line-height: 1.6;
color: #444;
text-align: left;
}
.download-btn {
display: inline-block;
padding: 15px 40px;
background: linear-gradient(90deg, #ffbb1e, #ff9158);
color: #fff;
font-size: 16px;
font-weight: bold;
border-radius: 30px;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transition: 0.3s;
}
.download-btn:hover {
background: linear-gradient(90deg, #ffbb1e, #ff9158);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.download-section {
flex-direction: column;
gap: 20px;
text-align: center;
}
.download-content {
text-align: center;
}
} .cta-group {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 24px;
}
.cta-btn {
--bg1: #ffd54f;
--bg2: #ffb300;
--shadow: #c49000;
--txt: #2b2b2b;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px;
border: none;
border-radius: 999px;
cursor: pointer;
font-weight: 700;
font-size: 16px;
color: var(--txt);
text-decoration: none;
background: linear-gradient(180deg, var(--bg1), var(--bg2));
box-shadow: 0 6px 0 var(--shadow), 0 8px 16px rgba(0, 0, 0, 0.15);
transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
-webkit-tap-highlight-color: transparent;
}
.cta-btn:hover {
filter: brightness(0.98);
}
.cta-btn.is-pressed {
transform: translateY(4px);
box-shadow: 0 2px 0 var(--shadow), 0 4px 8px rgba(0, 0, 0, 0.12);
}
.cta-btn.cta-btn--alt {
--bg1: #fff176;
--bg2: #ffd54f;
--shadow: #d0a638;
}
.cta-btn .icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
@media (max-width: 640px) {
.cta-btn--alt,
.cta-group {
display: none;
}
} .consult-banner {
position: fixed;
bottom: 20px;
left: 20px;
width: 260px;
display: flex;
align-items: center;
padding: 10px;
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.consult-banner img {
width: 70px;
height: auto;
margin-right: 10px;
border-radius: 6px;
}
.consult-text {
flex: 1;
font-size: 14px;
color: #333;
}
.consult-text strong {
font-size: 15px;
color: #ff9800;
}
.consult-button {
display: inline-block;
margin-top: 6px;
padding: 6px 12px;
background: linear-gradient(90deg, #ffbb1e, #ff9158);
color: #fff;
font-size: 13px;
font-weight: bold;
border-radius: 20px;
text-decoration: none;
transition: transform 0.2s ease;
}
.consult-button:hover {
background: #ffbb1e;
transform: translateY(-2px);
}
.consult-close {
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
background: #666;
color: #fff;
font-size: 12px;
line-height: 18px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
@media (max-width: 768px) {
.consult-banner {
display: none;
}
} .smrj-download-section {
padding: 0 20px;
background: #fff;
}
.smrj-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 0 auto;
padding: 50px;
}
.smrj-text-box {
flex: 1 1 50%;
position: relative;
}
.smrj-badge {
position: absolute;
top: -20px;
left: -20px;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: #f8b400;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
text-align: center;
border-radius: 50%;
}
.smrj-subtitle {
margin-left: 100px;
font-size: 16px;
font-weight: bold;
color: #f8b400;
}
.smrj-title {
margin: 15px 0;
margin-left: 100px;
font-size: 24px;
font-weight: bold;
line-height: 1.4;
}
.smrj-description {
margin-left: 100px;
font-size: 14px;
color: #333;
}
.smrj-image-box {
flex: 1 1 50%;
display: flex;
justify-content: center;
position: relative;
}
.smrj-img-back {
z-index: 1;
}
.smrj-img-front {
position: relative;
width: 70%;
max-width: 350px;
border-radius: 6px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
z-index: 2;
}
.contact-img {
width: 70%;
} @media (max-width: 768px) {
.smrj-download-section {
padding: 10px 20px;
}
.smrj-container {
display: block;
padding: 0;
gap: 15px;
}
.smrj-badge {
top: -10px;
left: -10px;
width: 70px;
height: 70px;
font-size: 12px;
}
.smrj-subtitle,
.smrj-title,
.smrj-description {
margin-left: 80px;
}
.smrj-subtitle {
font-size: 14px;
}
.smrj-title {
font-size: 20px;
}
.smrj-description {
font-size: 13px;
}
.smrj-img-back {
width: 50%;
max-width: 200px;
}
.smrj-img-front {
width: 60%;
max-width: 250px;
}
.contact-img {
width: 100%;
}
}
@media (max-width: 600px) {
.smrj-title {
font-size: 17px;
}
} .smrj-contact-section {
padding: 40px 20px;
background: #fff;
text-align: left;
}
.smrj-contact-container {
max-width: 800px;
margin: 0 auto;
}
.smrj-contact-subtitle {
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #f8b400;
}
.smrj-contact-title {
margin-bottom: 15px;
font-size: 22px;
font-weight: bold;
color: #000;
}
.smrj-contact-text {
font-size: 14px;
line-height: 1.6;
color: #555;
}
@media (max-width: 600px) {
.smrj-contact-subtitle {
font-size: 14px;
}
.smrj-contact-title {
font-size: 18px;
}
.smrj-contact-text {
font-size: 13px;
}
} .demo-alert {
margin: 20px 0;
padding: 16px 20px;
border-left: 4px solid #f39c12;
background-color: #fff7e6;
border-radius: 8px;
font-family: Arial, sans-serif;
}
.demo-alert-header {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.demo-alert-icon svg {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-right: 8px;
}
.demo-alert-title {
margin: 0;
font-size: 18px;
font-weight: bold;
color: #e67e22;
}
.demo-alert-list {
margin: 0;
padding-left: 32px;
list-style-type: disc;
font-size: 14px;
line-height: 1.6;
color: #555;
}
@media (max-width: 600px) {
.demo-alert {
padding: 12px 16px;
}
.demo-alert-title {
font-size: 16px;
}
.demo-alert-icon svg {
width: 20px;
height: 20px;
}
.demo-alert-list {
font-size: 13px;
}
} .trl-section {
font-family: "Noto Sans JP", Arial, sans-serif;
color: #222;
max-width: 980px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.trl-title {
font-size: 22px;
margin-bottom: 16px;
color: #1f2937;
} .trl-card {
background: #fff;
border: 3px dashed #ff9158;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(31, 41, 55, 0.06);
padding: 16px;
margin-bottom: 20px;
} .trl-subtitle {
font-size: 16px;
margin-bottom: 10px;
color: #0f172a;
} .trl-features-list {
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: 10px 18px;
margin: 0;
padding: 0;
}
.trl-feature-item {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 15px;
color: #0b1220;
}
.trl-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
color: #16a34a; } .trl-flow-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding-left: 0;
}
.trl-flow-item {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 15px;
color: #0b1220;
} .trl-note-list {
margin: 0;
padding-left: 20px;
}
.trl-note-item {
font-size: 14px;
color: #374151;
margin-bottom: 8px;
} .trl-timeroot {
padding: 12px;
border: 1px dashed #e5e7eb;
border-radius: 8px;
text-align: center;
font-size: 14px;
color: #6b7280;
}
.online-img {
width: 50%;
} @media (min-width: 720px) {
.trl-features-list {
grid-template-columns: 1fr 1fr;
}
.trl-section {
padding: 28px;
}
.trl-title {
font-size: 26px;
}
}
@media (max-width: 420px) {
.trl-card {
padding: 12px;
}
.trl-title {
font-size: 20px;
}
.trl-feature-item,
.trl-flow-item {
font-size: 14px;
}
} .support-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #fff7e6, #ffe0b3);
padding: 40px 20px;
}
.support-text {
max-width: 500px;
}
.support-text h2 {
font-size: 14px;
font-weight: 600;
color: #ff9158;
margin: 10px 0;
}
.support-text h3 {
font-size: 26px;
font-weight: 700;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
.support-text p {
font-size: 15px;
color: #555;
line-height: 1.7;
}
.support-image {
flex: 1 1 300px;
max-width: 500px;
text-align: center;
}
.support-image img {
max-width: 50%;
height: auto;
border-radius: 8px;
}
@media (max-width: 768px) {
.support-section {
flex-direction: column;
text-align: center;
gap: 20px;
padding: 0;
}
.support-text h3 {
font-size: 22px;
}
} .checklist {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px;
margin: 0 auto;
}
.check-item {
display: flex;
align-items: center;
background: #fff7f0;
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.check-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.check-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
margin-right: 12px;
}
.check-text {
font-size: 1.1rem;
font-weight: 500;
}
@media (max-width: 600px) {
.check-text {
font-size: 1rem;
}
.check-item {
padding: 10px 14px;
}
} .section {
position: relative;
height: 300px;
background: url(https://picsum.photos/800/300) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
}
@media (max-width: 600px) {
.overlay {
font-size: 1.2rem;
padding: 10px;
}
} .contact-phone {
text-align: center;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 20px 10px;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.contact-phone .contact-text {
font-size: 14px;
color: #333;
margin-bottom: 8px;
}
.contact-phone .contact-number {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
font-size: 16px;
font-weight: bold;
color: #333;
}
.contact-phone .phone-icon svg {
vertical-align: middle;
}
.contact-phone .hours {
font-size: 13px;
color: #666;
}
@media (max-width: 480px) {
.contact-phone {
padding: 15px 5px;
}
.contact-phone .contact-text {
font-size: 13px;
}
.contact-phone .contact-number {
font-size: 15px;
flex-direction: column;
gap: 2px;
}
.contact-phone .phone-icon svg {
width: 18px;
height: 18px;
}
} .checkbox_item {
display: inline-block;
margin-right: 15px;
}
.under {
background: linear-gradient(transparent 60%, #fffe03 60%);
}
.tab-title {
position: relative;
padding-left: 35px;
}
.tab-title::before {
content: "\f0eb";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 15px;
position: absolute;
left: 0;
top: 50%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
color: #fff;
background: #ffca2c;
border-radius: 50%;
transform: translateY(-50%);
}
.tab-title::after {
content: "";
position: absolute;
left: 20px;
top: 50%;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #ffca2c;
transform: translateY(-50%);
} :root {
--zkm-bg: #fff;
--zkm-ink: #1f2937;
--zkm-accent: #ff7a18;
--zkm-card: #fbfbfb;
--zkm-radius: 14px;
--zkm-shadow: 0 6px 16px rgba(31, 41, 55, 0.08);
--zkm-gap: 20px;
--zkm-maxwidth: 1100px;
font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.zkm_appr_wrap {
background: linear-gradient(180deg, #fffaf6 0%, #fff 100%);
color: var(--zkm-ink);
padding: 48px 20px;
display: flex;
justify-content: center;
}
.zkm_appr_inner {
width: 100%;
max-width: var(--zkm-maxwidth);
}
.zkm_appr_head {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 22px;
}
.zkm_appr_kicker {
display: inline-block;
background: var(--zkm-accent);
color: #fff;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
line-height: 1;
box-shadow: 0 4px 14px rgba(255, 122, 24, 0.14);
}
.zkm_appr_title {
font-size: 20px;
font-weight: 700;
margin: 0;
color: var(--zkm-ink);
}
.zkm_appr_sub {
margin-top: 6px;
font-size: 14px;
color: #6b7280;
}
.zkm_grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--zkm-gap);
align-items: start;
}
.zkm_card_check {
background: var(--zkm-card);
border-radius: var(--zkm-radius);
box-shadow: var(--zkm-shadow);
padding: 18px;
display: flex;
align-items: center;
gap: 12px;
}
.zkm_check_icon {
width: 20px;
height: 20px;
border-radius: 4px;
background: var(--zkm-accent);
display: flex;
align-items: center;
justify-content: center;
}
.zkm_check_icon svg {
width: 14px;
height: 14px;
fill: #fff;
}
@media (max-width: 640px) {
.zkm_grid {
grid-template-columns: 1fr;
}
.zkm_appr_head {
flex-direction: column;
align-items: flex-start;
}
} @media (max-width: 768px) {
.os-animation {
animation: none !important;
opacity: 1 !important;
}
.os-animation.fadeInUp {
animation: fadeInUp 0.8s ease forwards !important;
opacity: 0;
}
} .demo-section {
background: #f2f3f5;
padding: 70px 20px;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.demo-heading {
display: inline-block;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 1.9rem;
font-weight: 700;
color: #333;
border-bottom: 3px solid #f8b400;
}
.demo-intro {
margin-bottom: 50px;
font-size: 1.05rem;
line-height: 1.7;
color: #555;
}
.demo-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.demo-card {
background: #fff;
border-radius: 10px;
padding: 25px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
text-align: left;
transition: box-shadow 0.3s;
}
.demo-card:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.card-header h3 {
margin-left: 10px;
font-size: 1.15rem;
font-weight: 600;
color: #222;
}
.demo-card ul {
margin: 0;
padding-left: 20px;
list-style: disc;
font-size: 0.95rem;
line-height: 1.6;
color: #444;
}
@media (max-width: 768px) {
.demo-heading {
font-size: 1.6rem;
}
.demo-intro {
font-size: 1rem;
}
} .news {
background: #fff;
padding: 120px 0;
}
.news_inner {
display: flex;
justify-content: center;
}
.news_list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
width: 100%;
} .voice-item {
background: #fff;
border: solid 1px #f2c94c;
box-shadow: 0 12px 12px 0 rgba(40, 47, 60, 0.3);
border-radius: max(10px, min(15px, calc((100vw - 10px - 100%) * 9999)));
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.voice-img {
padding: 10px;
}
.voice-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.voice-item a {
color: inherit;
text-decoration: none;
display: block;
height: 100%;
} .voice-word {
font-size: 18px;
font-weight: bold;
margin: 10px 20px 5px;
line-height: 1.4;
color: #333;
}
.voice-place {
font-size: 13px;
color: #666;
margin: 0 20px 8px;
}
.voice-title {
font-size: 14px;
color: #999;
margin: 0 20px 20px;
border-top: 1px solid #eee;
padding-top: 10px;
} @media (max-width: 768px) {
.news {
padding: 80px 0;
}
.news .title b.pink {
font-size: 22px;
}
.news_list {
gap: 24px;
}
.voice-word {
font-size: 16px;
}
}
@media (max-width: 480px) {
.voice-title {
font-size: 13px;
}
}