@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300&display=swap');

body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 300;
}
.font {
    font-weight: 100;
    font-size: 1.3em;
}
.w_space {
    white-space: nowrap;
}
/*---------button------------*/
.btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    margin: 8px 1px;
    padding: 4px 10px;
    border-radius: 8px;
    opacity: 0.7;
}
.btn:hover {
    opacity: 1;
}
.btn-red {
    background: #ed2e2e;
}
.btn-orange {
    background: #ea9129;
}
.btn-green {
    background: #219042;
}
.btn-blue {
    background: #1f95eb;
}
/*----------------------------*/
#top {
    height: 100vh;
    background-color: #ffdb98;
}
#top_img img {
    width: 100%;
    height: 100vh;
    background-size: cover;
    object-fit: cover;
    vertical-align: bottom;
}
#top_img {
    position: relative;
}
#dummy {
    display: none;
}
.screen {
    height: 70vh!important;
}
.opening {
    opacity : 0;
	transform : translate(-50%, calc(-50% + 100px));
    position: absolute;
    top: 50%;
    left: 50%;
}
.opening-touch {
	opacity : 1;
	transform : translate(-50%,-50%);
	transition : all 1.5s;
	}
.daiji {
    opacity: 0;
    transform: translateY(120px);
}
.fadein {
    opacity: 0;
    transform: translateY(+150px);
}
.scrollin {
    opacity: 1;
    transform: translateY(0);
    transition: all 1.5s;
}
.info_h1 {
    display: inline-block;
    margin: 0 auto 30px;
    padding: 25px;
    box-shadow: 0 0 10px 3px #fff;
    color: #fff;
    background-color: rgba(247, 156, 49, 0.85);
    font-size: 1.5em;
}
/*-----------------header-----------*/
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 10;
    transition: all 1s ease;
}
header.visible {
    background-color: rgba(247, 156, 49, 0.75);
    transition: all .5s ease;
}
header.visible > .logo {
    opacity: 1;
    transition: all 1s ease;
}
.logo {
    opacity: 0;
    margin: 8px 0 8px 50px;
}
nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin-right: 50px;
}
nav a {
    padding: 8px;
    font-weight: 300;
    text-decoration: none;
    color: #fff;
}
nav a::after {
    content: "/";
}
nav a:hover {
    text-decoration: underline;
}
.white_word {
    color: #000;
}
.white_word.white {
    color: #fff;
}
.active {
    text-decoration: underline;
}
/*--------------introduction--------------------*/
.introduction {
    background-color: #e88321;
    padding: 60px 0 30px;
    color: #fff;
    text-align: center;
}
.introduction h1 {
    display: inline-block;
    margin: 0 auto 30px;
    padding: 25px;
    box-shadow: 0 0 10px 3px #fff;
    font-size: 1.3em;
}
.introduction p {
    width: 75%;
    margin: 0 auto;
    font-size: 1em;
    line-height: 2.5em;
    text-align: left;
}
.introduction ul {
    width: 80%;
    display: flex;
    justify-content: space-around;
    margin: 90px auto 30px;
}
.introduction a {
    width: 230px;
    text-decoration: none;
    color: #fff;
}
.introduction i {
    font-size: 2.9em;
}
.introduction li {
    width: 230px;
    padding: 10px 0;
}
.introduction ul li:hover a {
    color: #0014ff;
    text-decoration: underline;
    transition: all .5s ease;
}
/*--------------スクロールボタン---------------------*/
#pagetop {
    position: fixed;
    bottom: 5%;
    right: 3%;
    color: #000;
    cursor: pointer;
}
/*------------お知らせ------------------------------*/
.info {
    background-color: #ffe4b2;
}
.wrap {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    padding: 60px 0 0;
}
.activities > .wrap {
    padding: 0;
}
.title {
    display: block;
    margin: 0 auto;
    width: 220px;
    padding: 18px;
    border: 1px solid #000;
    box-shadow: 4px 4px 0 0 #000;
    margin-bottom: 40px;
    font-size: 1.3em;
    text-align: center;
}
.info h3 {
    font-size: 1.3em;
    line-height: 2em;
}
.twoitems {
    padding: 30px 0 40px;
    display: flex;
    justify-content: space-around;
    border-bottom: 34px solid #ffe4b2;
}
.img_wrap {
    width: 25%;
}
.img_wrap > a:hover {
    opacity: 0.7;
}
.info img {
    width: 100%;
}
.contents {
    width: 70%;
    text-align: left;
    font-weight: 300;
}
.info_space1 {
    background: linear-gradient(#fff,#ffe4b2);
    height: 200px;
}
.info_space2 {
    background: linear-gradient(#ffe4b2,#fff);
    height: 200px;
}
.info_space3 {
    background: linear-gradient(#fff,#e88321);
    height: 150px;
}
.info_space4 {
    background: linear-gradient(#e88321,#ffe4b2);
    height: 100px;
}
.info_space5 {
    background: linear-gradient(#ffe4b2,#e88321);
    height: 150px;
}
.info_space6 {
    background: linear-gradient(#e88321,#fff);
    height: 150px;
}
/*-----------------------団体概要----------------*/
.org ul {
    display: flex;
}
.org li {
    width: 50%;
    text-align: center;
    display: flex;
    align-items: stretch;
}
.org ul li div {
    padding: 16px;
}
.org img {
    width: 100%;
    object-fit: cover;
}
.org p {
    display: inline-block;
    text-align: left;
}
.paragraph {
    text-align: left;
    line-height: 2em;
}
.paragraph iframe {
    width: 100%;
    max-width: 640px;
}
/*-----------------沿革------------------------*/
#history {
    width: 70%;
    margin: 30px auto 0;
}
#history > p {
    font-size: 1.5em;
    text-align: center;
    line-height: 3em;
}
#history th {
    width: 65px;
    text-align: left;
}
#history td{
    line-height: 2em;
}
/*-----------------compe----------------------*/
.pic_list h1 {
    font-size: 1.4em;
    text-align: center;
    padding: 12px 0;
}
.pic_list img {
    vertical-align: middle;
    display: block;
    margin: 0.5px 0;
}
.pic_list li {
    width: 33.3%;
}
.pic_list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.compe-p {
    width: 420px;
    margin: 0 auto;
}
/*-----------------members--------------------*/
#infomation {
    width: 70%;
    margin: 0 auto;
    background-color: #d9ffd2;
    padding: 8px;
}
#base {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
    padding: 4px;
    box-shadow: 0 0 4px 2px #da7327;
}
#base:hover {
    opacity: 0.8;
}
.member > .wrap {
    padding: 0;
}
.member > .wrap > section {
    padding: 30px;
}
/*--------------活動報告switch----------------*/
#switch {
    background-color: #e88321;
    padding: 30px 0 20px;
}
.switch {
    width: 320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.switch li {
    color: #fff;
    
}
.activities-active {
    box-shadow: 0 0 10px 3px #fff;
    padding: 5px 8px;
}
.switch a {
    display: block;
    padding: 5px 8px;
    text-decoration: none;
    color: #fff
}
.switch a:hover {
    box-shadow: 0 0 10px 3px #fff;
}
/*-----------------Contact--------------------*/
#formWrapper {
    width: 75%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px 10%;
    box-sizing: border-box;
}
label {
    display: block;
    margin: 30px 0 10px;
}
input {
    display: block;
    width: 230px;
    padding: 8px;
    border-radius: 12px;
}
.radio-b {
    display: inline-block;
    width: 32px;
    height: 20px;
}
textarea {
    width: 70%;
    height: 150px;
}
#formWrapper h4::before {
    content: "※";
    color: red;
}
#thxMessage {
    padding-top: 30px;
    text-align: center;
}
/*-----------------Footer---------------------*/
footer {
    height: 150px;
    text-align: center;
    background-color: #e88321;
}
footer p {
    margin-top: 50px;
    display: inline-block;
    color: #fff;
    font-size: .9em;
}
/*--------------------------------------------------870px--------------------------------*/
@media screen and (max-width: 960px) {
    .opening img {
        width: 90vw;
    }
    .logo {
        margin-left: 8px;
    }
    .activities > .wrap > .twoitems {
        display: block;
    }
    .img_wrap {
        width: 50%;
        margin: 0 auto;
    }
    .artist_name {
        display: block;
        text-align: center;
        line-height: 1.3em!important;
        padding-bottom: 20px;
    }
    #infomation {
        width: 95%;
    }
    .info_h1 {
        width: 40%;
        text-align: center;
    }
    .twoitems {
        display: block;
    }
    .wrap {
        width: 90%;
    }
    .img_wrap {
        width: 50%;
        margin: 0 auto;
    }
    .contents {
        width: 98%;
        margin: 0 auto;
    }
    #history {
        width: 90%;
    }
/*-----------------Contact--------------------*/
    #formWrapper {
        width: 90%;
        padding: 20px 5%;
    }
    textarea {
        width: 100%;
    }
/*-----------ハンバーガーメニュー---------*/
    header {
        height: 118px;
    }
    header.show {
        background-color: rgba(0,0,0,0.8);
        width: 100vw;
        height: 100vh;
        overflow: scroll;
    }
    header nav {
        visibility: hidden;
        width: 100%;
    }
    header.show nav {
        visibility: visible;
        transition: all .5s ease;
    }
    header nav ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 230px;
        height: 370px;
        display: block;
        text-align: center;
    }
    header.show nav ul li {
        font-size: 1.4em;
        line-height: 2.4em;
    }
    .logo.show {
        display: none;
    }
    .white_word {
        color: #fff;
    }
    
/*--------------.hamburger------------*/
    .hamburger {
        position: fixed;
        background-color: #ffd4b4;
        top: 32px;
        right: 0px;
        /*float: right;*/
        display: block;
        margin: 6px 20px 4px 0;
        height: 34px;
        width: 34px;
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0 0 4px 2px #da7327;
        padding: 3px;
        z-index: 100;
    }
    .hamburger span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: #da7327;
        position: relative;
        transition: transform .5s, opacity .5s;
    }
    .hamburger span:nth-child(1) {
        top: 2px;
    }
    .hamburger span:nth-child(2) {
        top: 12px;
    }
    .hamburger span:nth-child(3) {
        top: 22px;
    }
    .hamburger.show span:nth-child(1) {
        transform: translateY(12px) rotate(-225deg);
    }
    .hamburger.show span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.show span:nth-child(3) {
        transform: translateY(-13px) rotate(225deg);
    }
    /*--------------introduction--------------------*/
    .introduction h1 {
        max-width: 90%;
        margin: 0 auto 50px;
        padding: 20px;
        box-sizing: border-box;
    }
    .introduction p {
        width: 90%;
        margin: 0 auto;
        font-size: 1em;
        line-height: 2.5em;
        text-align: left;
    }
    /*-------------comp------------------------------*/
    .pic_list h1 {
        font-size: 1.2em;
    }
    .pic_list li {
        width: 49.9%;
    }
}
/*--------------------------------------------------640px--------------------------------*/
@media screen and (max-width: 640px) {
    #top {
        background-position: 40% center;
    }
    #top_img img {
        object-position: 70% center;
    }
    #member {
        object-position: 32% center!important;
    }
    #supporter {
        object-position: 52% center!important;
    }
    .info_h1 {
        width: 70%;
        font-size: 1.2em;
    }
    .introduction ul {
        display: block;
    }
    .introduction li {
        margin: 16px auto;
    }
    .img_wrap {
        width: 70%;
        margin: 0 auto;
    }
    .org ul {
        display: block;
    }
    .org li {
        width: 100%;
        display: block;
    }
    history {
        width: 100%;
    }
    .foot {
        display: none;
    }
    .compe-p {
        width: 95%;
    }
}