@charset "UTF-8";

html {
    font-size: 62.5%;
}
body {
    margin: 0;
}
h1,h2,h3,h4,h5,h6,
ul,ol,dl,table {
    margin-top: 0;
}
p {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}
img {
    vertical-align: bottom;
}
header,
section {
    min-height: 100vh;
    position: relative;
}
h1,h2 {
    position: absolute;
    left: 5%;
    top: 26%;

    transform: rotate(90deg);
    transform-origin: bottom left;

    font-size: 5rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}
h1,
.about-area h2,
.contact-area h2 {
    color: #ffffff;
}
.web-area h2,
.banner-area h2,
.pop-area h2,
.handwriting-area h2,
.others-area h2 {
    color: #666666;
}
.small {
    margin: 0 0.8rem;
    font-size: 2.5rem;
    font-weight: 200;
}
.ja {
    font-family: 'Noto Sans JP', sans-serif;
}


/*----- スナップ -----*/
.wrapper {
    scroll-snap-type: y mandatory;

    height: 100vh;
    overflow: scroll;
}
header,
section {
    scroll-snap-align: start;
}

/*-- nav --*/
#nav-switch {
    display: none;
}
.global-nav {
    padding: 2% 15%;
    margin-bottom: 0;

    list-style: none;
}
.global-nav__item {
    font-size: 3.5rem;
    font-family: 'Raleway', sans-serif;
}

.global-nav__item a {
    color: #ffffff;
    /*-text-shadow: 0.5px 0.5px 1px #999999;-*/

    text-decoration: none;
}
.child-nav {
    display: flex;
    list-style: none;
}
.child-nav__item {
    border-left: solid 0.1rem #ffffff;

    font-size: 2.3rem;
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
}
.nav-small {
    font-size: 1.8rem;
}

.child-nav__item:first-child {
    border-left: none;
}
.child-nav__item a {
    padding:0 2rem;

    color: #ffffff;
    /*-text-shadow: 0.5px 0.5x 1px #999999;-*/
    

    display: block;
    text-align: center;
    text-decoration: none;
}
.nav-btn {
    width: 11rem;
    height: 11rem;

    background-image: url(images/nav.svg);
    color:rgba(255, 255, 255, 0);

    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 7%;
    right: 5%;

    z-index: 99;
    cursor:pointer;
}
.nav-box {
    width: 100%;
    min-height: 30%;

    background-color: rgba(252,246,113,0.95);

    position: fixed;
    top: 0;
    left: 0;

    z-index: 1;
}
.nav-box {
    top: 100%;
}
#nav-switch:checked ~ .nav-box {
    top: 0;
}


/* totop */
.totop {
    width: 11rem;
    height: 11rem;
    
    background-image: url(images/totop.svg);

    position: fixed;
    right: 5%;
    bottom: 7%;
}
.totop a {
    display: block;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    color:rgba(255, 255, 255, 0);
    text-decoration: none;
}
.wrapper {
    scroll-behavior: smooth;
}
.web-area__grid,
.banner-area__grid,
.pop-area__grid,
.handwriting-area__grid,
.other-area__grid {
    background-position: center;
    background-image: cover;
    background-repeat: no-repeat;
}
.web-area img,
.banner-area img,
.pop-area img,
.handwriting-area img,
.others-area img {
    border: solid 0.1rem #cccccc;
}


/*-- top area --*/
.top-area {
    background-color: #FCF671;
}

/*-- area共通 --*/
.web-area__inner,
.banner-area__inner,
.pop-area__inner,
.handwriting-area__inner,
.others-area__inner {
    max-width: 800px;
    margin: 0 auto;
}
.image{
    width: 100%;
    height: auto;
}
.banner-area__grid,
.pop-area__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);

    padding: 10rem 0;
}

.web-area__grid,
.handwriting-area__grid,
.others-area__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);

    padding: 10rem 0;
}
.web01 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
}
.popup-box__web01,
.popup-box__others01,
.popup-box__others02 {
    padding-top: 8rem;
    padding-left: 5rem;
    padding-right: 5rem;
}
.popup-txtbox__web01,
.popup-txtbox__others01 {
    max-width: 580px;
    padding-bottom: 5rem;
    margin: 2rem auto 0 ;
    color: #666666;
}
.popup-box__web01 img,
.popup-box__others01 img,
.popup-box__others02 img {
    max-width: 100%;
}
.others01 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
}


/*-- about area --*/
.about-area {
    background-color: #D9500D;
}
.about-inner {
    max-width: 600px;
    padding: 15% 0 0;
    margin: 0 auto;

    color: #ffffff;
}

.intro01,
.intro02 {
    margin-bottom: 2rem;

    font-size: 1.2rem;
    line-height: 1.8;
}
.intro03 {
    margin-bottom: 4rem;

    font-size: 1.2rem;
    line-height: 1.8;
}
.about-inner ul {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
    grid-auto-flow: column;

    list-style: none;
    padding-left: 0;
    margin: 0;
}
.about-inner li {
    display: flex;
}
.about-inner li img {
    width: 35px;
    margin-right: 1rem;
}
.about-inner li span {
    margin-top: 1rem;

    font-family: 'Noto Sans JP', sans-serif;
}


/*--- contact area -*/
.contact-area {
    background-color: #70B997;
}
form {
    padding: 8% 0;
    text-align: center;
}
input[type="text"],
input[type="email"],
textarea {
    background: rgba(255,255,255,.8);
    border: none;
    box-shadow: 1px 1px 2px #999999;
    
    padding: 1.5rem;
    font-size: 1.3rem;
    font-family: 'Noto Sans JP', sans-serif;
    box-sizing: border-box;
}
input[type="text"],
input[type="email"]{
    width: 100%;
    max-width: 400px;

    margin-bottom: 2rem;
}
textarea{
    width: 100%;
    max-width: 400px;
    height: 30rem ;

    margin-bottom: 2rem;
}
input[type="submit"]{
    background: rgba(255, 255, 255,.8);
    box-shadow: 1px 2px 2px #999999;
    width: 100%;
    max-width: 100px;

    border: none;
    cursor: pointer;
    line-height: 3.5;

    font-family: 'Noto Sans JP', sans-serif;
}


/*-- popup --*/
.open {
	cursor:pointer; 
}
.open img:hover {
    opacity: 0.6;
    transition: opacity 0.1s linear;
}
#pop-up__w01,
#pop-up__w02,
#pop-up__w03,
#pop-up__w04,
#pop-up__b0101,
#pop-up__b0102,
#pop-up__b0103,
#pop-up__b0201,
#pop-up__b0202,
#pop-up__b0301,
#pop-up__b0302,
#pop-up__b0303,
#pop-up__b0401,
#pop-up__b0402,
#pop-up__b0501,
#pop-up__b0502,
#pop-up__b0601,
#pop-up__b0701,
#pop-up__p0101,
#pop-up__p0102,
#pop-up__p0201,
#pop-up__p0202,
#pop-up__p03,
#pop-up__p04,
#pop-up__p05,
#pop-up__p06,
#pop-up__h01,
#pop-up__h02,
#pop-up__o01,
#pop-up__o02 {
	display: none; 
}
.popup-window {
	display: none;
}
#pop-up__w01:checked + .popup-window,
#pop-up__w02:checked + .popup-window,
#pop-up__w03:checked + .popup-window,
#pop-up__w04:checked + .popup-window,
#pop-up__b0101:checked + .popup-window,
#pop-up__b0102:checked + .popup-window,
#pop-up__b0103:checked + .popup-window,
#pop-up__b0201:checked + .popup-window,
#pop-up__b0202:checked + .popup-window,
#pop-up__b0301:checked + .popup-window,
#pop-up__b0302:checked + .popup-window,
#pop-up__b0303:checked + .popup-window,
#pop-up__b0401:checked + .popup-window,
#pop-up__b0402:checked + .popup-window,
#pop-up__b0501:checked + .popup-window,
#pop-up__b0502:checked + .popup-window,
#pop-up__b0601:checked + .popup-window,
#pop-up__b0701:checked + .popup-window,
#pop-up__p0101:checked + .popup-window,
#pop-up__p0102:checked + .popup-window,
#pop-up__p0201:checked + .popup-window,
#pop-up__p0202:checked + .popup-window,
#pop-up__p03:checked + .popup-window,
#pop-up__p04:checked + .popup-window,
#pop-up__p05:checked + .popup-window,
#pop-up__p06:checked + .popup-window,
#pop-up__h01:checked + .popup-window,
#pop-up__h02:checked + .popup-window,
#pop-up__o01:checked + .popup-window,
#pop-up__o02:checked + .popup-window {
    position: fixed;
	top: 3%;
	left: 5%;
	z-index: 999;

    display: flex;
    justify-content: center;
    /*--align-items: center;--*/
    text-align: center;

    width: 90%;
    height: 94%;

    background-color: rgba(239, 239, 230, 0.98);

    overflow: auto;
}
.close {
    position: fixed;
	top: 7%;
	right: 7%;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 3rem;
    height: 3rem;
    border-radius: 50%;

    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #000000;
    transform: rotate(45deg);
	cursor:pointer;
}
.popup-box {
    display: flex;
    justify-content: space-around;

    padding: 8rem 3rem;
}
.popup-box img {
    width: 400px;
}
.img-cap {
    padding: 1.5rem 0 5rem;

    font-size: 1.2rem;
    color: #666666;
}
.popup-txtbox {
    width: 400px;
    margin: 10rem 0 0 3rem;
    
    color: #666666;
}
.popup-txtbox__theme {
    padding-bottom: 1rem;
    margin-bottom: 3rem;

    font-size: 1.6rem;
    border-bottom: dotted 5px #999999;

    display: inline-block;
}
.popup-txtbox__cap {
    margin-bottom: 3rem;

    font-size: 1.3rem;
    text-align: left;
}
.popup-txtbox__link {
    padding: 1rem 2rem;
    margin: 2rem auto 0;
    max-width: 30rem;

    background-color: #ffffff;
    box-shadow: 1px 2px 2px #999999;

    color: #666666;
    font-size: 1.5rem;
    font-family: 'Noto Sans JP', sans-serif;
    text-decoration: none;

    display: block;
    text-align: center;
}

/* animation */
.open{
    display:block; 
    position:relative;
    text-decoration:none;
    overflow:hidden;
}
.open:before{
    content:"";
    display:block;
}
.web-area .open:before{
    padding-top: 90.06%
}
.banner-area .open:before{
    padding-top: 83.46%
}
.pop-area .open:before{
    padding-top: 141.05%
}
.others-area .open:before{
    padding-top: 83.46%
}
.open img{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    transition:0.5s;
    display:block;
    width:98.5%;
}
.open:hover img{
    transform:scale(1.1);
}