@charset "UTF-8";
/* CSS Document */
.pagetop {bottom:35px;}

main {font-family:'Noto Sans JP', sans-serif;font-size:18px;line-height:1.8em;font-weight:normal;color:#000;background:url("img/1807craftpaper.jpg") repeat left top;padding-top:140px;overflow:hidden;}
main .sp {display:none !important;}

main section {display:block;position:relative;}
main a {text-decoration:none;}
main img {display:block;width:100%;}
.inner {margin:0 auto;position:relative;}
.inner:before,
.inner:after {content:"";display:table;clear:both;}

.parts {position:absolute;}

#main h1 {width:505px;position:absolute;left:50%;bottom:-70px;transform:translateX(-100%);z-index:2;}
#date {width:100%;background:#000;position:absolute;left:0;bottom:0;}
#date .inner {width:870px;}
#date .inner img {width:350px;float:right;margin:16px 0;}

#lede {padding:80px 0 50px 0;}
#lede .inner {width:886px;}
#lede .art {display:flex;justify-content:space-between;align-items:center;margin-bottom:45px;}
#lede .art .text {width:calc(100% - 310px);}
#lede .art .text h2 {width:390px;margin-bottom:35px;}
#lede .art .image {width:310px;}

#lede .button {width:350px;display:flex;justify-content:space-between;margin:0 auto;}
#lede .button li {width:109px;position:relative;background:#000;border-radius:100%;transition:0.3s;}
#lede .button li a {display:block;height:109px;border-radius:100%;position:relative;overflow:hidden;transform:translate(-4px,-4px);transition:0.3s;}
#lede .button li:hover {opacity:0.7;}
#lede .button li a:hover {transform:translate(0,0);}
#lede .button li a img {width:calc(100% + 5px);height:calc(100% + 5px);}

#lede .p01 {width:83px;right:calc(100% + 70px);bottom:75px;}
#lede .p02 {width:111px;left:calc(100% + 46px);bottom:75px;}


#event {padding:60px 0 40px 0;border-top:solid 5px #000;}
#event .inner {width:925px;}
#event h2 {width:300px;margin:0 auto 30px;}
#event .cap {width:114px;margin:0 auto 20px;}
#event .art {width:100%;display:flex;justify-content:space-between;margin-bottom:30px;}
#event .art li {width:295px;position:relative;background:#000;}
#event .art li a {display:block;height:435px;position:relative;overflow:hidden;transform:translate(-4px,-4px);transition:0.3s;}
#event .art li a:hover {transform:translate(0,0);}
#event .art li img {width:calc(100% + 5px);height:calc(100% + 5px);}
#event .art li .button {display:block;width:160px;height:auto;position:absolute;left:50%;bottom:20px;transform:translateX(-50%);}
#event .ather {display:flex;justify-content:space-between;}
#event .ather .text {width:294px;}
#event .ather .text h3 {width:200px;margin:15px auto 20px;}
#event .ather .text li {margin-bottom:10px;}
#event .ather .image img {width:667px;transform:translate(40px,0);}

#event .p01 {width:407px;left:0;top:0;}
#event .p02 {width:407px;right:0;top:0;}
#event .p03 {width:78px;right:calc(100% + 30px);bottom:170px;}


#article {padding:65px 0 90px 0;border-top:solid 5px #000;}
#article .inner {width:925px;}
#article h2 {width:290px;margin:0 auto 35px;}
#article ul {display:flex;justify-content:space-between;position:relative;z-index:1;}
#article ul li {width:295px;position:relative;background:#000;}
#article ul li a {display:block;height:370px;position:relative;overflow:hidden;transform:translate(-4px,-4px);transition:0.3s;}
#article ul li a:hover {transform:translate(0,0);}
#article ul li a img {width:calc(100% + 5px);height:calc(100% + 5px);}

#article .p01 {width:126px;right:calc(100% - 10px);top:145px;}
#article .p02 {width:160px;left:calc(100% - 20px);top:52px;}
#article .p03 {width:36px;left:calc(100% + 80px);top:296px;}
#article .p04 {width:34px;left:calc(100% + 70px);top:430px;}
#article .p05 {width:120px;right:calc(100% + 20px);top:510px;}


#present {padding:50px 0 40px;background:#339357;border-top:solid 5px #000;}
#present .inner_text,
#present .inner_item {width:930px;margin:0 auto;position:relative;}

#present h2 {width:315px;margin:0 auto 55px;}
#present .inner_text {display:flex;justify-content:space-between;margin-bottom:35px;}
#present .inner_text h3 {width:530px;}
#present .inner_text .text {width:320px;margin-right:16px;}
#present .inner_text .text .date {width:314px;margin-bottom:20px;}
#present .inner_text .text p {font-size:17px;line-height:1.5em;color:#fff;}
#present .inner_text .text li {margin-top:10px;}
#present .inner_item ul {display:flex;justify-content:space-between;flex-wrap:wrap;}
#present .inner_item ul li {width:455px;margin-bottom:20px;}
#present .inner_item ul li .pi_link {display:block;width:320px;margin:20px auto;}


/*hover*/
#event .ather .text li a,
#present .inner_text .text li a,
#present .inner_item ul li .pi_link,
.modal ul li a {opacity:1;transition:opacity 0.3s;}
#event .ather .text li a:hover,
#present .inner_text .text li a:hover,
#present .inner_item ul li .pi_link:hover,
.modal ul li a:hover {opacity:0.7;}

.cover {position:relative;}
.cover:before {content:"Coming Soon";color:#fff;font-weight:bold;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;}
.cover:after {content:"";display:block;width:100%;height:100%;background:rgba(0,0,0,0.7);position:absolute;left:-4px;top:-4px;z-index:2;}

.pagetop {position:static;width:100%;}
.pagetop a {display:block;width:100%;height:30px;background:#000 url("img/2x/m45.png") no-repeat center center;background-size:18px auto;}

#pop {display:none;width:200px;position:fixed;right:20px;bottom:30px;z-index:10;}
#pop a {opacity:1;transition:opacity 0.3s;}
#pop a:hover {opacity:0.7;}

.modal {display:none;width:750px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:310;}
.modal ul {width:295px;position:absolute;right:50px;bottom:44px;}
.modal ul li {margin-top:10px;}
.modal .close {width:18px;position:absolute;top:0;right:0;}

#shadow {display:none;width:100%;height:100%;background:rgba(0,0,0,0.6);position:fixed;left:0;top:0;z-index:300;}


@media screen and (max-width:1000px){
    main {font-size:1.8vw;overflow:hidden;}

    #main h1 {width:50.5vw;bottom:-7.0vw;}
    #date .inner {width:87.0vw;}
    #date .inner img {width:35.0vw;margin:1.6vw 0;}

    #lede {padding:8.0vw 0 5.0vw 0;}
    #lede .inner {width:88.6vw;}
    #lede .art {margin-bottom:4.5vw;}
    #lede .art .text {width:calc(100% - 31vw);}
    #lede .art .text h2 {width:39vw;margin-bottom:3.5vw;}
    #lede .art .image {width:31vw;}

    #lede .button {width:35vw;}
    #lede .button li {width:10.9vw;}
    #lede .button li a {height:10.9vw;transform:translate(-0.4vw,-0.4vw);}
    #lede .button li a:hover {transform:translate(0,0);}
    #lede .button li a img {width:calc(100% + 0.5vw);height:calc(100% + 0.5vw);}
    
    #lede .p01 {width:8.3vw;right:calc(100% + 7vw);bottom:7.5vw;}
    #lede .p02 {width:11.1vw;left:calc(100% + 4.6vw);bottom:7.5vw;}

    #event {padding:6vw 0 4vw 0;border-top:solid 0.5vw #000;}
    #event .inner {width:92.5vw;}
    #event h2 {width:30.0vw;margin:0 auto 3vw;}
    #event .cap {width:11.4vw;margin:0 auto 2vw;}
    #event .art {margin-bottom:3vw;}
    #event .art li {width:29.5vw;}
    #event .art li a {height:43.5vw;transform:translate(-0.4vw,-0.4vw);}
    #event .art li a:hover {transform:translate(0,0);}
    #event .art li img {width:calc(100% + 0.5vw);height:calc(100% + 0.5vw);}
    #event .art li .button {width:16vw;bottom:2vw;}
    #event .ather .text {width:29.4vw;}
    #event .ather .text h3 {width:20vw;margin:1.5vw auto 2vw;}
    #event .ather .text li {margin-bottom:1vw;}
    #event .ather .image img {width:66.7vw;transform:translate(4vw,0);}
    
    #event .p01 {width:40.7vw;}
    #event .p02 {width:40.7vw;}
    #event .p03 {width:7.8vw;right:calc(100% + 3vw);bottom:17vw;}
    

    #article {padding:6.5vw 0 9vw 0;border-top:solid 0.5px #000;}
    #article .inner {width:92.5vw;}
    #article h2 {width:29vw;margin:0 auto 3.5vw;}
    #article ul li {width:29.5vw;}
    #article ul li a {height:37vw;transform:translate(-0.4vw,-0.4vw);}
    #article ul li a:hover {transform:translate(0,0);}
    #article ul li a img {width:calc(100% + 0.5vw);height:calc(100% + 0.5vw);}
    
    #article .p01 {width:12.6vw;right:calc(100% - 1vw);top:14.5vw;}
    #article .p02 {width:16vw;left:calc(100% - 2vw);top:5.2vw;}
    #article .p03 {width:3.6vw;left:calc(100% + 8vw);top:29.6vw;}
    #article .p04 {width:3.4vw;left:calc(100% + 7vw);top:43vw;}
    #article .p05 {width:12vw;right:calc(100% + 2vw);top:51vw;}


    #present {padding:5vw 0 4vw;border-top:solid 0.5vw #000;}
    #present .inner_text,
    #present .inner_item {width:93vw;}

    #present h2 {width:31.5vw;margin:0 auto 5.5vw;}
    #present .inner_text {margin-bottom:3.5vw;}
    #present .inner_text h3 {width:53vw;}
    #present .inner_text .text {width:32vw;margin-right:1.6vw;}
    #present .inner_text .text .date {width:31.4vw;margin-bottom:2vw;}
    #present .inner_text .text p {font-size:1.7vw;}
    #present .inner_text .text li {margin-top:1vw;}
    #present .inner_item ul li {width:45.5vw;margin-bottom:2vw;}
    #present .inner_item ul li .pi_link {width:32vw;margin:2vw auto;}
    
    .cover:after {left:-0.4vw;top:-0.4vw;}

    .pagetop a {height:3vw;background:#000 url("img/2x/m45.png") no-repeat center center;background-size:1.8vw auto;}

    #pop {width:20vw;right:2vw;bottom:3vw;}

    .modal {width:75vw;}
    .modal ul {width:29.5vw;right:5vw;bottom:4.4vw;}
    .modal ul li {margin-top:1vw;}
    .modal .close {width:1.8vw;}
}


@media screen and (max-width:768px){
    
    main {padding:80px 0 0;font-size:4vw;line-height:1.8em;}
    main .pc {display:none !important;}
    main .sp {display:block !important;}
    
    #main {background:#fff;}
    #main h1 {width:83.2vw;left:50%;bottom:inherit;top:0;transform:translateX(-50%);z-index:2;}
    #mainvisual {padding-top:28.8vw;}
    #date {width:100%;background:#000;position:absolute;left:0;bottom:0;}
    #date .inner {width:100%;}
    #date .inner img {width:83.46vw;float:none;margin:2.66vw auto;}
    
    #lede {padding:19.2vw 0 26.66vw 0;background-image:url("img/2x/s02@2x.png"),url("img/2x/s02@2x.png");background-position:center top 5.06vw,center bottom 6.93vw;background-size:6.13vw auto,6.13vw auto;background-repeat:no-repeat,no-repeat;}
    #lede .inner {width:85.86vw;}
    #lede .art {display:block;margin-bottom:0;}
    #lede .art .text {width:100%;}
    #lede .art .text h2 {width:auto;margin-bottom:6.4vw;}
    #lede .art .text p {text-align:center;}
    #lede .art .image {width:82.66vw;margin-bottom:6.66vw;}
    
    #lede .button.sp {width:85.33vw;display:flex !important;margin:0 auto 10.66vw;}
    #lede .button li {width:26.66vw;}
    #lede .button li a {height:26.66vw;transform:translate(-1.06vw,-1.06vw);}
    #lede .button li:hover {opacity:0.7;}
    #lede .button li a:hover {transform:translate(0,0);}
    #lede .button li a img {width:calc(100% + 1.33vw);height:calc(100% + 1.33vw);}
    
    
    #event {padding:10.66vw 0 10.66vw 0;border-top:solid 1.33vw #000;}
    #event .inner {width:78.66vw;}
    #event h2 {width:55.46vw;margin:0 auto 10.66vw;}
    #event .cap {width:30.4vw;margin:0 auto 2.66vw;}
    #event .art {display:block;margin-bottom:0;}
    #event .art li {width:100%;margin-bottom:9.33vw;}
    #event .art li a {height:116vw;transform:translate(-1.06vw,-1.06vw);}
    #event .art li a:hover {transform:translate(0,0);}
    #event .art li img {width:calc(100% + 1.33vw);height:calc(100% + 1.33vw);}
    #event .art li .button {width:42.66vw;bottom:5.86vw;}
    
    #event .ather {display:block;}
    #event .ather .text {width:100%;}
    #event .ather .text h3 {width:auto;margin:0 auto 8vw;}
    #event .ather .text ul {width:78.66vw;margin:0 auto;}
    #event .ather .text li {margin-bottom:4vw;}

    #event .p01 {width:108.53vw;left:-80vw;top:0;}
    #event .p02 {width:108.53vw;right:-80vw;top:0;}
    #event .p03 {width:13.66vw;right:inherit;left:-6.2vw;bottom:-17.4vw;}
    
    
    #article {padding:13.33vw 0 13.33vw 0;border-top:solid 1.33vw #000;}
    #article .inner {width:78.66vw;}
    #article h2 {width:76.66vw;margin:0 auto 10.13vw;}
    #article ul {display:block;}
    #article ul li {width:100%;margin-bottom:5.86vw;}
    #article ul li a {height:98.66vw;transform:translate(-1.06vw,-1.06vw);}
    #article ul li a:hover {transform:translate(0,0);}
    #article ul li a img {width:calc(100% + 1.33vw);height:calc(100% + 1.33vw);}

    #article .p01 {width:23.75vw;right:calc(100% - 10px);top:15vw;}
    #article .p02 {width:30.4vw;left:calc(100% - 20px);top:11vw;}
    #article .p03,
    #article .p04 {display:none;}
    #article .p05 {width:29.33vw;right:-11.66vw;top:inherit;bottom:-10vw;}
    
    #present {padding:10.66vw 0 6.66vw;border-top:solid 1.33vw #000;}
    #present .inner_text,
    #present .inner_item {width:100%;}

    #present h2 {width:66.66vw;margin:0 auto 5.86vw;}
    #present .inner_text {display:block;margin-bottom:0;}
    #present .inner_text h3 {width:83.2vw;margin:0 auto 7.46vw;}
    #present .inner_text .text {width:100%;margin:0 0 6.4vw 0;}
    #present .inner_text .text .date {width:81.6vw;margin:0 auto 4vw;}
    #present .inner_text .text p {width:82.66vw;font-size:4vw;line-height:1.8em;margin:0 auto;}
    #present .inner_text .text li {width:78.66vw;margin:2.66vw auto 0;}
    #present .inner_item ul {display:block;}
    #present .inner_item ul li {width:90.66vw;margin:0 auto 5.33vw;}
    #present .inner_item ul li .pi {margin:8vw auto 0;}
    #present .inner_item ul li .pi_link {width:78.66vw;margin:6.66vw auto 0;}
    #present #pi {margin-bottom:0;}
    
    .pagetop a {height:8vw;background:#000 url("img/2x/m45.png") no-repeat center center;background-size:4.8vw auto;}
    
    .cover:after {left:-1.06vw;top:-1.06vw;}
    
    #pop {width:100%;height:auto;left:0;bottom:0;}
    
    /*
    .modal {width:89.33vw;}
    .modal ul {width:66.66vw;position:absolute;right:50%;bottom:4.8vw;transform:translate(50%,0);}
    .modal ul li {margin-top:2.1vw;}
    .modal .close {width:4.8vw;}*/
    .modal {width:auto;height:90%;}
    .modal img {width:auto;height:100%;}
    .modal ul {width:100%;position:static;}
    .modal ul li {width:auto;height:9%;margin:0;position:absolute;left:50%;bottom:13.54%;transform:translateX(-50%);}
    .modal ul li:nth-child(2) {bottom:3.2%;}
    .modal .close {width:auto;height:3.2%;}
}