@charset "UTF-8";

body {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
color: #333333;
}
a:hover {
opacity: 0.8;
}
@media screen and (max-width: 768px) {
.pc_only {
display: none !important;
}
}
@media screen and (min-width: 769px) {
.sp_only {
display: none !important;
}
}
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 80px;
background-color: #FF7E33;
z-index: 1000;
}
header .header_hako {
position: relative;
padding: 15px;
}
header .header_hako .logo_hako {
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
z-index: 600;
}
header .header_hako .logo_hako .logo {
font-family: "Ubuntu", sans-serif;
font-weight: 400;
font-style: normal;
color: #fff;
font-size: 40px;
}
@media only screen and (max-width: 768px) {
.nav_hako {
position: fixed;
right: -100%;
top: 0;
width: 100%;
height: 100vh;
padding-top: 60px;
background-color: #FF7E33;
-webkit-transition: all 0.6s;
transition: all 0.6s;
overflow-y: auto;
}
.nav_hako .nav_list {
margin: 0;
padding: 50px 0px;
list-style: none;
border-bottom: 2px solid #fff;
}
.nav_hako .nav_list .nav_item {
text-align: center;
padding: 0 14px;
}
.nav_hako .nav_list .nav_item a {
display: block;
padding: 8px 0;
text-decoration: none;
color: #FFF;
font-size: 19px;
}
.nav_hako .nav_list .nav_item a:hover {
background-color: #eee;
}
.nav_hako .sns_hako {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav_hako .sns_hako .sns_click {
padding: 45px 35px;
}
.nav_hako .sns_hako .sns_click img {
text-align: center;
}
.hamburger {
position: absolute;
right: 15px;
top: 20px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 300;
}
.hamburger_border {
position: absolute;
left: 11px;
width: 18px;
height: 2px;
background-color: #fff;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.hamburger_border_top {
top: 14px;
}
.hamburger_border_center {
top: 20px;
}
.hamburger_border_bottom {
top: 26px;
}
.nav-open .nav_hako {
right: 0;
}
.nav-open .hamburger_border_top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 20px;
}
.nav-open .hamburger_border_center {
width: 0;
left: 50%;
}
.nav-open .hamburger_border_bottom {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 20px;
}
}
@media only screen and (min-width: 769px) {
.header_hako {
max-width: 980px;
width: 100%;
padding: 15px 30px;
font-size: 14px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.header_hako .logo_hako {
padding: 10px 15px;
}
.header_hako .nav_list {
text-align: right;
margin: 10px;
}
.header_hako .nav_list li.nav_item {
display: inline-block;
text-align: right;
padding-left: 20px;
}
.header_hako .nav_list li.nav_item a {
color: #fff;
font-size: 15px;
}
.header_hako .sns_hako {
display: none;
}
}
@media only screen and (min-width: 880px) {
.header_hako {
max-width: 980px;
width: 100%;
padding: 15px 30px;
font-size: 14px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.header_hako .logo_hako {
padding: 10px 15px;
}
.header_hako .nav_list {
text-align: right;
margin: 10px;
}
.header_hako .nav_list li.nav_item {
display: inline-block;
text-align: right;
padding-left: 20px;
}
.header_hako .nav_list li.nav_item a {
color: #fff;
font-size: 18px;
}
.header_hako .sns_hako {
display: none;
}
}
main {
padding-top: 80px;
text-align: center;
}
@media only screen and (min-width: 769px) {
main .content_a {
margin: 0 auto; padding: 0 20px;
}
}
main .title_hako {
width: 100%;
height: 100px;
background-color: #FF7E33;
}
main .title_hako .en_title {
font-size: 36px;
color: #fff;
font-family: "Fredoka", sans-serif;
font-weight: 500;
}
main .title_hako .ja_title {
font-size: 13px;
font-weight: 600;
color: #fff;
}
@media only screen and (max-width: 768px) {
main .title_hako {
height: 80px;
}
main .title_hako .en_title {
font-size: 30px;
}
}
main .title_b {
font-size: 24px;
font-weight: 700;
padding-bottom: 45px;
}
main .cnt {
padding-bottom: 45px;
max-width: 850px;
margin: 0 auto;
}
main .cnt a {
color: #333333;
}
@media only screen and (max-width: 768px) {
main .title_b {
text-align: left;
padding-bottom: 10px;
}
main .cnt {
text-align: left;
padding-bottom: 25px;
}
}
@media only screen and (min-width: 769px) {
main {
font-size: 18px;
}
}
main .rc_btn { display: block;
width: 180px;
height: 41px;
font-family: "Fredoka", sans-serif;
font-family: "Zen Kaku Gothic New", sans-serif;
border-radius: 10px;
border: 4px solid #6B7FFF;
margin: auto;
padding-right: 5px;
padding-top: 3px;
position: relative;
color: #6B7FFF;
}
@media only screen and (min-width: 769px) {
main .rc_btn {
padding-top: 0px;
}
}
main .rc_btn::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #6B7FFF;
position: absolute;
top: 50%;
right: 0;
padding-right: 12px; margin-top: -6px;
}
main .last_btn {
padding-top: 90px;
padding-bottom: 90px;
}
main .table01 {
margin: auto;
}
main .th01 {
padding-top: 25px;
text-align: left;
}
main .td01 {
border-bottom: solid 1px #fff;
padding-bottom: 25px;
text-align: left;
width: 900px;
}
@media only screen and (max-width: 768px) {
main .th01 {
padding-top: 15px;
}
main .td01 {
padding-bottom: 15px;
padding-left: 1em;
}
}
main .td00 {
padding-bottom: 25px;
text-align: left;
width: 900px;
}
@media only screen and (max-width: 768px) {
main .td00 {
padding-bottom: 15px;
padding-left: 1em;
}
}
main .th02 {
white-space: nowrap;
font-weight: 700;
}
main .td02 {
text-align: left;
}
.cnt .table01 {
padding: 10px 0;
}
.cnt .table01 tbody {
width: 100%;
}
.cnt .table01 tbody tr {
width: 100%;
}
.cnt input {
width: 100%;
height: 40px;
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
@media only screen and (min-width: 769px) {
.cnt .table01 {
max-width: 900px;
padding: 30px 20px;
}
}
@-webkit-keyframes slide-to-left {
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes slide-to-left {
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes loop {
100% {
-webkit-transform: translateX(-166.6666666667%);
transform: translateX(-166.6666666667%);
}
}
@keyframes loop {
100% {
-webkit-transform: translateX(-166.6666666667%);
transform: translateX(-166.6666666667%);
}
}
@-webkit-keyframes loop2 {
100% {
-webkit-transform: translateX(-133.3333333333%);
transform: translateX(-133.3333333333%);
}
}
@keyframes loop2 {
100% {
-webkit-transform: translateX(-133.3333333333%);
transform: translateX(-133.3333333333%);
}
}
@media only screen and (max-width: 768px) {
@-webkit-keyframes loop2 {
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
@keyframes loop2 {
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
}
@media only screen and (min-width: 769px) {
.content2 {
margin: 0 auto;
}
}
.content2 .content_a {
padding-bottom: 60px;
padding-top: 60px;
word-break: break-all;
}
@media only screen and (max-width: 768px) {
.content2 .content_a {
margin: 0 20px;
padding-top: 35px;
padding-bottom: 30px;
}
}
.content2 .content_a .mr_btn02 {
display: block;
color: #333333;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 200px;
height: 50px;
border-radius: 30px;
background-color: #fff;
margin: 45px auto;
padding: 8px 10px 0;
border: 2px solid #333333;
}
.content2 .content_a.no_page {
padding-bottom: 200px;
padding-top: 200px;
}
.content2 .content_b {
background-color: #FFA16C;
color: #fff;
padding-top: 60px;
padding-bottom: 60px;
}
@media only screen and (max-width: 768px) {
.content2 .content_b {
padding-top: 30px;
padding-bottom: 30px;
}
}
@media only screen and (max-width: 768px) {
.content2 .content_b .title_b {
margin: 0 20px;
}
}
@media only screen and (max-width: 768px) {
.content2 .content_b .cnt {
margin: 0 20px;
}
}
.content2 .content_b .mr_btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: 150px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 43px;
border-radius: 20px;
background-color: #fff;
color: #333333;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (min-width: 769px) {
.content2 .content_b .mr_btn {
padding-left: 15px;
padding-right: 15px;
}
}
.content2 .loop2 {
overflow: hidden;
max-width: 900px;
margin: 0 auto;
pointer-events: none;
}
.content2 .loop2 .loop2_hako {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-animation: loop2 20s linear infinite;
animation: loop2 20s linear infinite;
padding-top: 45px;
padding-bottom: 45px;
}
@media only screen and (min-width: 769px) {
.content2 .loop2 .loop2_hako {
-webkit-animation: loop2 25s linear infinite;
animation: loop2 25s linear infinite;
}
}
.content2 .loop2 .loop2_hako .loop2_box {
min-width: 33.3333333333%;
padding-left: 40px;
}
@media only screen and (max-width: 768px) {
.content2 .loop2 .loop2_hako .loop2_box {
min-width: 50%;
padding-left: 20px;
}
}
.content2 .loop2 .loop2_hako .loop2_box .loop2_item {
width: 100%;
border-radius: 30px;
}
@media only screen and (max-width: 768px) {
.content2 .loop2 .loop2_hako .loop2_box .loop2_item {
width: 100%;
}
}
.content2 .loop2 .loop2_hako .loop2_box:nth-child(even) {
margin-top: 60px;
}
.content2 .loop2 .loop2_hako .loop2_box:nth-child(odd) {
margin-bottom: 60px;
}
.content2 .loop2 .loop3_hako {
padding-top: 15px;
padding-bottom: 15px;
}
#backToTop {
position: fixed;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #6b7fffa1;
border: none;
cursor: pointer;
bottom: 50px;
}
@media only screen and (max-width: 768px) {
#backToTop {
right: 10px;
margin-top: -50px;
}
}
@media only screen and (min-width: 769px) {
#backToTop {
right: 30px;
}
}
#backToTop::before {
content: "▲";
color: #fff;
font-size: 20px;
}
footer {
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: #FF7E33;
border-top-left-radius: 2000px 300px;
border-top-right-radius: 2000px 300px;
z-index: 100;
}
footer .footer_hako {
padding-top: 70px;
}
@media only screen and (max-width: 768px) {
footer .footer_hako {
padding-top: 30px;
}
}
footer .footer_hako .sns_hako2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
footer .footer_hako .sns_hako2 .sns_click {
padding: 50px 40px;
}
@media only screen and (max-width: 768px) {
footer .footer_hako .sns_hako2 .sns_click {
padding: 5px 30px;
}
}
footer .footer_hako .sns_hako2 .sns_click img {
text-align: center;
}
footer .footer_hako .moyou {
padding: 15px 0;
}
@media only screen and (max-width: 768px) {
footer .footer_hako .moyou {
padding: 5px 0;
}
}
footer .footer_hako .moyou img {
height: 95px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (max-width: 768px) {
footer .footer_hako .moyou img {
height: 45px;
}
}
footer .footer_hako .footer_policy {
padding: 20px 0;
}
footer .footer_hako .footer_policy a {
color: #fff;
font-size: 20px;
}
footer .footer_hako p {
text-align: center;
color: #fff;
padding: 20px 0;
font-size: 15px;
}
@media only screen and (max-width: 768px) {
footer .footer_hako .footer_policy {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
display: flex;
padding: 10px 0;
}
.footer_policy a {
display: block;
padding: 3px 8px;
color: #FFF;
}
}
@media only screen and (min-width: 769px) {
.footer_hako {
margin-left: auto;
margin-right: auto;
}
.footer_hako .footer_policy {
text-align: center;
}
.footer_hako .footer_policy a {
text-align: center;
padding-left: 20px;
}
}
main .fs-16 {
padding-bottom: 16px;
}
@media only screen and (min-width: 769px) {
main .fs-16 {
font-size: 16px;
}
}
#black_btn {
display: block;
min-width: 220px;
border-radius: 30px;
color: #fff;
background-color: #d4cdc9;
border: 2px solid #d4cdc9;
margin: auto 20px;
padding: 10px;
text-decoration:none;
}
#black_btn::after{
width: 0.88rem;
height: 1.04rem;
vertical-align: top;
} #black_btn:hover {
color: #d4cdc9;
background-color: #FFF;
border: 2px solid #d4cdc9;
transition: all 0.5s;
}
@media only screen and (max-width: 768px) {
#black_btn{
margin: 20px;
}
}
.ul {
text-decoration: underline;
}
#fs-15{
font-size: 15px;
}
.h-orange:hover{
color: #FF7E33;
}
#brown{
color: #914343;
}
main .a-title{
font-size: 24px;
}
@media only screen and (max-width: 768px) {
main .a-title {
font-size: 18px;
}
}
main .a-left{
text-align: left;
}
main .pb-18{
padding-bottom: 18px;
} main .fit-content{
width: fit-content;
}
@media only screen and (min-width: 769px) {
main .pc-fs-20 {
font-size: 20px;
}
}
@media only screen and (max-width: 768px) {
main .sp-fs-15 {
font-size: 15px;
}
main .sp-a-left{
text-align: left;
}
}
main .ps-22{
font-size: 22px;
}
main .center{
text-align: center;
} .badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
.bg-danger {
background-color: #dc3545 !important;
}
.fa-shake {
-webkit-animation-name: fa-shake;
animation-name: fa-shake;
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-shake, .fa-spin {
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
}
.badge {
user-select: none;
}
@-webkit-keyframes fa-shake {
0% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg)
}
4% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg)
}
8%,24% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg)
}
12%,28% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg)
}
16% {
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg)
}
20% {
-webkit-transform: rotate(22deg);
transform: rotate(22deg)
}
32% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg)
}
36% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg)
}
40%,to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@keyframes fa-shake {
0% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg)
}
4% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg)
}
8%,24% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg)
}
12%,28% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg)
}
16% {
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg)
}
20% {
-webkit-transform: rotate(22deg);
transform: rotate(22deg)
}
32% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg)
}
36% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg)
}
40%,to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}