@charset "UTF-8";
@font-face { font-family: "YuMincho"; src: url("/craft-in-home-common/fonts/YuMincho.woff") format("woff"); }

body { padding: 0; margin: 0; }

main#craft_in_home_main { opacity: 0; transition-duration: .3s; transition-delay: .3s; overflow: hidden; background-color: white; }

main#craft_in_home_main * { font-family: YuMincho; font-weight: bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; }

main#craft_in_home_main .section01 { padding-bottom: 66%; background-image: url("/craft-in-home-common/img/fv_bg.png"); background-size: 100%; position: relative; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 { background-image: url("/craft-in-home-common/img/sp_fv_bg.jpg"); padding-bottom: 186%; } }

main#craft_in_home_main .section01 .main-logo { width: 20%; position: absolute; top: 2%; left: 2%; transform: scale(0); transition-duration: .5s; transition-delay: .5s; transition-timing-function: cubic-bezier(0, 1.01, 0.7, 1.29); }

main#craft_in_home_main .section01 .main-logo.view { transform: scale(1); }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .main-logo { width: 85%; margin: auto; left: 0; top: 5%; right: 0; } }

main#craft_in_home_main .section01 .sub-logo { width: 20%; position: absolute; bottom: 2%; right: 2%; z-index: 3; transform: translateX(50%); opacity: 0; transition-duration: .5s; }

main#craft_in_home_main .section01 .sub-logo.view { opacity: 1; transform: translate(0, 0); }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .sub-logo { width: 40%; } }

main#craft_in_home_main .section01 .house { width: 40%; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 2; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .house { width: 82%; } }

main#craft_in_home_main .section01 .milk { width: 6%; position: absolute; left: 0; right: 0; bottom: 16%; margin: 0 auto; z-index: 0; transform: translateY(100%); transition-duration: .5s; transition-delay: 1.5s; }

main#craft_in_home_main .section01 .milk.view { transform: translate(0, 0); }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .milk { width: 11%; bottom: 12%; transition-delay: 0s; } }

main#craft_in_home_main .section01 .yellow-window { width: 20%; position: absolute; left: 0; right: 0; top: 50%; bottom: 0; margin: auto; z-index: 0; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .yellow-window { width: 80%; } }

main#craft_in_home_main .section01 .sun { width: 12%; position: absolute; right: 25%; left: 0; top: 0; bottom: 62%; margin: auto; transform: translate(100%, 100%); transition-duration: .5s; transition-delay: 1s; }

main#craft_in_home_main .section01 .sun.view { transform: translate(0, 0); }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .sun { width: 22%; right: 49%; bottom: 38%; transform: translate(100%, 180%); } }

main#craft_in_home_main .section01 .cloud01 { width: 19%; position: absolute; left: 42%; right: 0; top: 0; bottom: 45%; margin: auto; -webkit-animation-name: cloud; animation-name: cloud; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 4.5s; animation-duration: 4.5s; -webkit-animation-delay: .5s; animation-delay: .5s; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .cloud01 { width: 30%; bottom: 25%; } }

main#craft_in_home_main .section01 .cloud02 { width: 19%; position: absolute; left: 0; right: 45%; top: 0; bottom: 26%; margin: auto; -webkit-animation-name: cloud; animation-name: cloud; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 4s; animation-duration: 4s; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section01 .cloud02 { width: 30%; bottom: 10%; } }

@-webkit-keyframes cloud { 0% { transform: translateX(-5%); }
  50% { transform: translateX(5%); }
  100% { transform: translateX(-5%); } }

@keyframes cloud { 0% { transform: translateX(-5%); }
  50% { transform: translateX(5%); }
  100% { transform: translateX(-5%); } }

main#craft_in_home_main .section01 .sns { display: inline-block; position: absolute; top: 3%; right: 2%; }

main#craft_in_home_main .section01 .sns a { display: contents; }

main#craft_in_home_main .section01 .sns a img { width: 50px; height: 50px; margin-left: 10px; -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); }

main#craft_in_home_main .sns-section { background-color: #3691cb; display: flex; align-items: center; justify-content: center; padding: 40px 0; }

main#craft_in_home_main .sns-section a { display: contents; }

main#craft_in_home_main .sns-section a img { width: 50px; margin: 0 10px; -webkit-filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); }

main#craft_in_home_main .section02 { padding-top: 5%; padding-bottom: 10%; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section02 { padding-bottom: 0; } }

main#craft_in_home_main .section02 h2 { margin: 0; padding: 6% 2%; text-align: center; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section02 h2 { padding: 40px 0; } }

main#craft_in_home_main .section02 h2 img { width: 40%; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section02 h2 img { width: 70%; } }

main#craft_in_home_main .section02 .statement { padding: 0 20px; max-width: 1080px; margin: 0 auto; text-align: center; font-size: 24px; letter-spacing: 3px; line-height: 4; color: #3691cb; white-space: nowrap; }

@media screen and (max-width: 1100px) { main#craft_in_home_main .section02 .statement { font-size: 18px; } }

@media screen and (max-width: 900px) { main#craft_in_home_main .section02 .statement { font-size: 16px; } }

@media screen and (max-width: 767px) { main#craft_in_home_main .section02 .statement { white-space: normal; font-size: 14px; letter-spacing: 1px; line-height: 2.2; text-align: left; } }

main#craft_in_home_main .section02 .statement span { color: black; font-size: 24px; }

@media screen and (max-width: 1100px) { main#craft_in_home_main .section02 .statement span { font-size: 18px; } }

@media screen and (max-width: 900px) { main#craft_in_home_main .section02 .statement span { font-size: 16px; } }

@media screen and (max-width: 767px) { main#craft_in_home_main .section02 .statement span { font-size: 14px; } }

main#craft_in_home_main .section02 .pack-face { width: 85%; margin: 0 auto; margin-top: 30px; }

main#craft_in_home_main .section03 { display: flex; background-image: url("/craft-in-home-common/img/kousaku_bg01.jpg"); background-repeat: repeat-y; background-size: contain; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section03 { flex-wrap: wrap; } }

main#craft_in_home_main .section03 .kousaku { width: 50%; background-repeat: no-repeat; text-align: center; position: relative; background-size: contain; overflow: hidden; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section03 .kousaku { width: 100%; } }

main#craft_in_home_main .section03 .kousaku .comp { will-change: filter; }

main#craft_in_home_main .section03 .kousaku .comp * { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }

main#craft_in_home_main .section03 .kousaku .comp.view * { -webkit-animation-play-state: running, running !important; animation-play-state: running, running !important; }

main#craft_in_home_main .section03 .kousaku:nth-of-type(1) .comp { position: absolute; left: 0; top: 6%; right: 7%; bottom: 0; margin: auto; width: 75%; }

main#craft_in_home_main .section03 .kousaku:nth-of-type(2) { background-color: rgba(10, 128, 193, 0.7); background-size: 150%; }

main#craft_in_home_main .section03 .kousaku:nth-of-type(2) .comp { position: absolute; left: 0; top: 24%; right: 0; bottom: 0; margin: auto; width: 121%; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section03 .kousaku:nth-of-type(2) .comp { width: 130%; } }

main#craft_in_home_main .section03 .kousaku:nth-of-type(3) { background-color: rgba(219, 60, 0, 0.85); background-size: 150%; }

main#craft_in_home_main .section03 .kousaku:nth-of-type(3) .comp { position: absolute; left: 0; right: 0; bottom: -6%; margin: auto; width: 86%; }

@media screen\0 { main#craft_in_home_main .section03 .kousaku:nth-of-type(3) .comp { bottom: -21% !important; } }

@supports (-ms-ime-align: auto) { main#craft_in_home_main .section03 .kousaku:nth-of-type(3) .comp { bottom: -40%; } }

main#craft_in_home_main .section03 .kousaku .ttl { padding: 10% 0; padding-bottom: 127%; width: 95%; }

main#craft_in_home_main .section03 .kousaku .tsukurikata-btn { display: contents; }

main#craft_in_home_main .section03 .kousaku .tsukurikata-btn div { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 14.5%; width: 62%; background-color: #ffd100; color: black; padding: 10px; border-radius: 50px; font-size: 1.4vw; -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); will-change: filter; transition-duration: .3s; }

main#craft_in_home_main .section03 .kousaku .tsukurikata-btn div:hover { transform: scale(1.05); }

@media screen and (max-width: 767px) { main#craft_in_home_main .section03 .kousaku .tsukurikata-btn div { font-size: 14px; padding: 8px; bottom: 17%; } }

main#craft_in_home_main .section03 .kousaku .download-btn { display: contents; }

main#craft_in_home_main .section03 .kousaku .download-btn div { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 2%; width: 60%; background-color: white; color: black; padding: 10px; border-radius: 50px; font-size: 1.4vw; line-height: 1.4; border: solid 1px #eee; -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); will-change: filter; transition-duration: .3s; }

main#craft_in_home_main .section03 .kousaku .download-btn div:hover { transform: scale(1.05); }

@media screen and (max-width: 767px) { main#craft_in_home_main .section03 .kousaku .download-btn div { font-size: 14px; padding: 8px; bottom: 6%; width: 62%; } }

main#craft_in_home_main .section03 .kousaku .download-btn div img { width: 7%; transform: translateY(2px); }

main#craft_in_home_main .section03 .kousaku .download-btn div span { font-size: 1.2vw; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section03 .kousaku .download-btn div span { font-size: 12px; } }

main#craft_in_home_main .section04 { background-color: #62a8d5; overflow: hidden; }

main#craft_in_home_main .section04 .inner { max-width: 1080px; padding: 0 20px; margin: 0 auto; position: relative; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section04 .inner { padding-bottom: 58%; } }

main#craft_in_home_main .section04 .inner .ttl { font-size: 30px; text-align: center; padding: 7% 0; }

@media screen and (max-width: 900px) { main#craft_in_home_main .section04 .inner .ttl { padding: 30px 0; } }

main#craft_in_home_main .section04 .inner ul { list-style: none; margin: 0; padding-left: 10px; margin-bottom: -100px; width: -webkit-min-content; width: -moz-min-content; width: min-content; margin: 0 auto; }

@media screen and (max-width: 900px) { main#craft_in_home_main .section04 .inner ul { width: 100%; } }

@media screen and (max-width: 767px) { main#craft_in_home_main .section04 .inner ul { margin-bottom: 0; } }

main#craft_in_home_main .section04 .inner ul li { display: inline-flex; align-items: center; margin-bottom: 40px; }

@media screen and (max-width: 900px) { main#craft_in_home_main .section04 .inner ul li { flex-wrap: wrap; flex-direction: column; } }

main#craft_in_home_main .section04 .inner ul li .no { display: flex; justify-content: flex-start; align-items: center; }

@media screen and (max-width: 900px) { main#craft_in_home_main .section04 .inner ul li .no { width: 100%; margin-bottom: 10px; } }

main#craft_in_home_main .section04 .inner ul li .no .number { display: flex; justify-content: center; align-items: center; background-color: white; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section04 .inner ul li .no .number { width: 35px; height: 35px; } }

main#craft_in_home_main .section04 .inner ul li .no .object { width: 150px; display: flex; align-items: center; font-size: 24px; margin-left: 10px; }

@media screen and (max-width: 1050px) { main#craft_in_home_main .section04 .inner ul li .no .object { font-size: 20px; width: 130px; } }

@media screen and (max-width: 900px) { main#craft_in_home_main .section04 .inner ul li .no .object { width: auto; font-size: 24px; } }

@media screen and (max-width: 767px) { main#craft_in_home_main .section04 .inner ul li .no .object { font-size: 18px; } }

main#craft_in_home_main .section04 .inner ul li .text { font-size: 16px; white-space: nowrap; }

@media screen and (max-width: 1050px) { main#craft_in_home_main .section04 .inner ul li .text { font-size: 14.5px; } }

@media screen and (max-width: 900px) { main#craft_in_home_main .section04 .inner ul li .text { width: 100%; font-size: 15px; white-space: normal; } }

@media screen and (max-width: 767px) { main#craft_in_home_main .section04 .inner ul li .text { font-size: 12px; } }

main#craft_in_home_main .section04 .inner .ill { width: 100%; position: relative; top: 80px; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section04 .inner .ill { position: absolute; bottom: -6%; width: 90%; top: auto; } }

main#craft_in_home_main .section05 { background-color: #ffd100; overflow: hidden; }

main#craft_in_home_main .section05 .inner { max-width: 1080px; padding: 0 20px; margin: 0 auto; }

main#craft_in_home_main .section05 .inner .ttl { font-size: 30px; text-align: center; padding: 7% 0; }

@media screen and (max-width: 900px) { main#craft_in_home_main .section05 .inner .ttl { padding: 30px 0; } }

main#craft_in_home_main .section05 .inner ul { list-style: none; margin: 0; padding-left: 10px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; }

main#craft_in_home_main .section05 .inner ul li { display: flex; align-items: center; margin-bottom: 40px; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section05 .inner ul li { flex-wrap: wrap; } }

main#craft_in_home_main .section05 .inner ul li:nth-of-type(2) .text { position: relative; }

main#craft_in_home_main .section05 .inner ul li:nth-of-type(2) .text::after { position: absolute; top: 25px; left: 0; content: 'ハサミを使うときはじゅうぶんに気をつけよう。'; color: #db4b00; font-size: 13px; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section05 .inner ul li:nth-of-type(2) .text::after { display: none; } }

main#craft_in_home_main .section05 .inner ul li:nth-of-type(2) .text span { font-size: 11px; color: #db4b00; }

main#craft_in_home_main .section05 .inner ul li .no { display: flex; justify-content: flex-start; align-items: center; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section05 .inner ul li .no { width: 100%; margin-bottom: 10px; } }

main#craft_in_home_main .section05 .inner ul li .no .number { display: flex; justify-content: center; align-items: center; background-color: white; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; }

main#craft_in_home_main .section05 .inner ul li .no .object { display: flex; align-items: center; font-size: 24px; margin-left: 10px; }

@media screen and (max-width: 1050px) { main#craft_in_home_main .section05 .inner ul li .no .object { font-size: 18px; } }

@media screen and (max-width: 900px) { main#craft_in_home_main .section05 .inner ul li .no .object { font-size: 16px; } }

main#craft_in_home_main .section05 .inner ul li .text { font-size: 16px; white-space: nowrap; margin-left: 20px; }

@media screen and (max-width: 900px) { main#craft_in_home_main .section05 .inner ul li .text { font-size: 14px; } }

@media screen and (max-width: 767px) { main#craft_in_home_main .section05 .inner ul li .text { margin-left: 0; white-space: normal; font-size: 12px; } }

main#craft_in_home_main .section05 .inner .ill { width: 40%; display: block; margin: auto; padding-top: 30px; margin-right: 50px; padding-bottom: 30px; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section05 .inner .ill { width: 100%; margin-right: auto; } }

main#craft_in_home_main .section06 .icon { display: block; width: 25%; margin: 80px auto; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section06 .icon { width: 80%; margin: 50px auto; } }

main#craft_in_home_main .section06 .afterword { padding: 0 20px; margin: 0 auto; text-align: center; font-size: 24px; letter-spacing: 2px; line-height: 3; color: #3691cb; margin-bottom: 80px; }

main#craft_in_home_main .section06 .afterword span { color: black; font-size: 24px; text-decoration: underline; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section06 .afterword span { font-size: 16px; } }

@media screen and (max-width: 767px) { main#craft_in_home_main .section06 .afterword { font-size: 16px; text-align: left; line-height: 2; letter-spacing: 1px; margin-bottom: 40px; } }

main#craft_in_home_main .section06 .poster-wrap { display: flex; justify-content: center; align-items: center; max-width: 1080px; margin: 0 auto; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section06 .poster-wrap { flex-wrap: wrap; margin-bottom: 40px; } }

main#craft_in_home_main .section06 .poster-wrap .poster-thumb { width: 30%; }

@media screen and (max-width: 767px) { main#craft_in_home_main .section06 .poster-wrap .poster-thumb { width: 80%; margin-bottom: 30px; } }

main#craft_in_home_main .section06 .poster-wrap .btn { display: contents; }

main#craft_in_home_main .section06 .poster-wrap .btn div { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; background-color: #ffd100; color: black; padding: 10px 30px; border-radius: 50px; font-size: 16px; line-height: 1.4; margin-left: 40px; -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); transform: translateZ(0); will-change: filter; transition-duration: .3s; }

main#craft_in_home_main .section06 .poster-wrap .btn div:hover { transform: scale(1.05); }

main#craft_in_home_main .section06 .poster-wrap .btn div img { width: 20px; transform: translateY(2px); }

@media screen and (max-width: 767px) { main#craft_in_home_main .section06 .poster-wrap .btn div { margin-left: 0; text-align: center; } }

main#craft_in_home_main .section06 .page-bottom { width: 100%; margin-top: -50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; }

footer#craft_in_home_footer { margin-top: -50px; background-color: #3691cb; text-align: right; }

@media screen and (max-width: 767px) { footer#craft_in_home_footer { text-align: center; margin-top: -20px; } }

footer#craft_in_home_footer img { width: 30%; margin-right: 30px; }

@media screen and (max-width: 767px) { footer#craft_in_home_footer img { width: 80%; margin-right: 0; } }

.lity-close { display: none; }

.lity { background-color: rgba(0, 0, 0, 0.7) !important; }

.kousaku-pop { width: 750px; height: 90vh; margin: 0 auto; background-color: white; position: relative; background-repeat: repeat-y; overflow: auto; text-align: center; background-size: 100%; background-repeat: repeat-y; }

@media screen and (max-width: 767px) { .kousaku-pop { width: 100vw; height: 100vh; } }

.kousaku-pop#kousaku01 { background-image: url("/craft-in-home-common/img/kousaku_bg01.jpg"); }

.kousaku-pop#kousaku02 { background-image: url("/craft-in-home-common/img/kousaku_bg02.jpg"); }

.kousaku-pop#kousaku03 { background-image: url("/craft-in-home-common/img/kousaku_bg03.jpg"); }

.kousaku-pop .close { width: 50px; cursor: pointer; position: absolute; right: 0; top: 0; }

.kousaku-pop .pop-top { width: 80%; margin-top: 50px; }

.kousaku-pop .kousaku-section { width: 90%; margin-top: 30px; margin-bottom: 60px; }

.kousaku-pop .download-btn { display: contents; }

.kousaku-pop .download-btn div { width: 70%; background-color: white; color: black; padding: 10px; border-radius: 50px; font-size: 16px; line-height: 1.4; border: solid 1px #ddd; margin: 0 auto; margin-top: 20px; -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); transition-duration: .3s; }

.kousaku-pop .download-btn div:hover { transform: scale(1.05); }

.kousaku-pop .download-btn div img { width: 7%; transform: translateY(2px); }

.kousaku-pop .download-btn div span { font-size: 12px; }

.kousaku-pop .close-btn { display: contents; }

.kousaku-pop .close-btn div { width: 70%; background-color: #ffd100; color: black; padding: 10px; border-radius: 50px; font-size: 16px; line-height: 1.4; margin: auto; margin-bottom: 50px; -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)); transition-duration: .3s; }

.kousaku-pop .close-btn div:hover { transform: scale(1.05); }

.fade-from-bottom { opacity: 0; transform: translateY(50px); -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

.fade-from-bottom.view { -webkit-animation-name: fade-from-bottom; animation-name: fade-from-bottom; }

_:-ms-lang(x), .fade-from-bottom { animation-name: fade-from-bottom; }

@-webkit-keyframes fade-from-bottom { from { opacity: 0;
    transform: translateY(50px); }
  to { opacity: 1;
    transform: translateY(0px); } }

@keyframes fade-from-bottom { from { opacity: 0;
    transform: translateY(50px); }
  to { opacity: 1;
    transform: translateY(0px); } }

.pc-only { display: block; }

@media screen and (max-width: 767px) { .pc-only { display: none !important; } }

.sp-only { display: none !important; }

@media screen and (max-width: 767px) { .sp-only { display: block !important; } }

.pc-only-flex { display: flex !important; }

@media screen and (max-width: 767px) { .pc-only-flex { display: none !important; } }

.sp-only-flex { display: none !important; }

@media screen and (max-width: 767px) { .sp-only-flex { display: flex !important; } }

.pc-only-inline { display: inline-block; }

@media screen and (max-width: 767px) { .pc-only-inline { display: none; } }

.sp-only-inline { display: none; }

@media screen and (max-width: 767px) { .sp-only-inline { display: inline-block; } }