/* -------------------------------------------- */
/*  ▼ 全幅共通/スマホ幅で適用するCSS ▼
/* -------------------------------------------- */.btn-container {
  text-align: center;
}

button {
  width: 80%;
  height: 50px;
  font-size: 38px;
  font-weight: bold;

  /* ボタンにカーソルを当てると、カーソルがポインターに変わる */
  cursor: pointer;
}

/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

.hidden {
  display: none;
}

#mask {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 50%;
  padding: 24px;
  border-radius: 4px;
  color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}

body{
  margin: 0;
}

body {
	text-align : center;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(img/asalato-panman_bg.png);
	background-position: 0% 0%;
	background-repeat: repeat-x;
	background-size: cover;
	/*margin-bottom: 150px; */
}
#container {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 30px 0px 00px 0px;
}

.container{
  max-width: 1200px;
  margin: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.text-center{
	text-align: center;
	margin-top: 10px;
}

.section-padding{
	/* padding-top: 0px; */
	padding-bottom: 0px;
}
.section-padding-sns{
	/* padding-top: 0px; */
	padding-bottom: 0px;
}

img{
	height: auto;
	max-width: 100%;
	margin-right: 0px;
}
.container.flex-container .header-logo.text-center .titlelogp {
}

.header-nav ul{
  list-style-type: none;
  padding-left: 0;
}
#container .footer .container.text-center {
	color: #FFFFFF;
}

.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex-all-row{
  flex-direction: row;
}

.header-nav ul{
  list-style-type: none;
  padding-left: 0;
}

.header-nav ul.flex-all-row li{
  width: 50%;
  margin-top: 10px;
}

.info-wrapper{
  max-width: 860px;
  margin: 1rem auto 100px;
}

div {
        font-size: 15px;
        text-align: center;
        /*margin: 10px;*/
        padding: 10px;
      }
div.child.gathe {
font-size: 15px;
text-align: center;
margin: 10px;
 padding: 0px; 
}

div.parent.gathe{

}

div.child.info {
font-size: 15px;
text-align: center;
margin: 10px;
padding: 0px; 
}

div.parent.info{

}

div.child.battle {
font-size: 15px;
text-align: center;
margin: 10px;
padding: 0px; 
}

div.parent.battle{

}
#base{
        font-size: 15px;
        text-align: center;
        margin: 0px;
        padding: 0px;
      }

.footerlogo   {
	width: 30%;
	margin-top: 0px;
}

.parent {
	/* background: lightblue; */
	height: auto;
      }

.child {
	width: 28%;
	float: left;
	/* background-color: #2A4EBD; */
      }
.container.section-padding .parent.battle .child.battle {
	width: 100%;
}

.gathe {
	/*background: lightblue;*/
	display: flex;
	margin-left: 0;
    margin-right: 0;
      }
.parent.gathe {
	/*background-color: #cccccc;*/
	display: flex;
	float: none;
	margin-top: 0px;
      }

.child.gathe{
	/*background-color: #ffffff;*/
	width: 100%;
	float: left;
	margin-top: 0px;
      }

.battle{
	
}
.parent.battle{
        /*background: lightblue;*/
        display: flex;
	margin-left: 0;
    margin-right: 0;
	margin-top: 0;
      }

.child.battle{
	/*background: lightgreen;*/
	width: 30%;
	float: left;
      }


.link{
  /*background-color: #FFFDE6;*/
max-width: 1200px;
margin-left: auto;
margin-right: auto;	
}
.parent.link{
        background: lightblue;
        display: flex;
      }

.child.link{
	background: lightgreen;
	width: 30%;
	float: left;
      }

section.sns{
	/*　background-color: #FFFDE6;　*/
	text-align: center;
	/*margin-top: 30px;*/
}


#sns{    text-align: center;
    /* margin: 10px; */
    padding: 0px;
    width: 280px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    max-height: 80px;
	
}	
.parent.sns{
	/*background: lightblue;*/
	display: flex;
	/*width: 100%;*/
	padding: 0px;
max-width: 280px;
margin-left: auto;
margin-right: auto;
	
      }


.child.sns{
	/*　background: lightgreen;　*/
	width: 20%;
	margin-left: auto;
	margin-right: auto;
	max-width: 80px;
	padding: 0px;
      }
.child.sns img{
	width: auto;
	margin-left: 0px;
	}

.link_c1{
	width: 20%;
	}	

.footer{
	background-color: #161616
	}	

*{
	font-size : 21pt;
	float: none;
	clear: both;
	text-align: center;
	color: #000000;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
}
#container main .what {
	margin-top: 68px;
	margin-bottom: 92px;
}

/* ========================== */
/* header/footer
/* ========================== */
header,
footer{
	color: #FFFFFF;
	/* [disabled]background-color: #669900; */
}

/* ========================== */
/* main
/* ========================== */

/* --- ファーストビュー --- */


.event{
  background-color: #DBAF23;
}


.about{
  background-color: #FFFDE6;
}

/* --- お知らせ ---*/
.info{
	/*background-color: #FBB93D;*/
	margin-top: 50px;
}

.gathe{
	/*background-color: #03BDF0;*/
	margin-top: 50px;
	margin-bottom: 50px;
}

.news {
	/* width: 100%;　*/
	/* max-width: 1200px;　
	margin-top: 50px;
	[disabled]margin-right: 50px; 
	[disabled]margin-left: 50px; 
	margin-bottom: 50px;*/
	/*background-color: brown;*/
	padding: 0px 0px;
    margin-top: 80px;
	margin-bottom: 50px;
	max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
 .news img {
	width: 100%;
	margin-bottom: 0px;
 }
 .text-center {
     text-align: center;
	 
 }
 .flexbox {
	display: flex;
	margin: 0px;
	background-color: rgba(255, 255, 255, 0.562);
 }
 .box1 {
	width: 55%;
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]margin-bottom: auto; */
 }
 .box2 {
     width: 45%;
     margin: auto .5rem;
 }


#modal-btn-container {
  display: flex;
  justify-content: center;
}

#modal-btn {
  FONT-WEIGHT: 600;
    width: 100%;
    max-width: 480px;
    height: 60px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
}

#modal-btn:hover {
  opacity: 0.7;
}

#mask {
  display: none;
}

#mask.appear {
  display: block;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  animation: fadeIn 0.5s ease-out;
}
    
#modal {
  display: none;
}

#modal.appear {
  display: block;
  background: #fff;
  width: 50%;
  padding: 24px;
  border-radius: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: fadeIn 0.5s ease-out;
}

#close-btn-container {
  /*display: flex;*/
  justify-content: flex-end;
}

#close-btn {
  border-radius: 8px;
  padding: 8px;
}
#container main .scribe {
	width: 93%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	/*min-width: 400px;*/
	margin-top: 10px;
}
main .scribe .scribe {
	margin-top: 20px;
}
#mail {
        /* font-style: normal; */
    /* font-size: 30px; */
    /* max-width: 200px; */
    margin-left: auto;
    margin-right: auto;
    /* font-size: 500px; */
    width: 100%;
    padding: 10px 0 10px 0;
}

.what #modal p {
	font-size: 20px;
	text-align: center;
}
#modal #close-btn-container #close-btn {
	font-size: 18px;
}

section.mail {
    background-color: gray;
}

#mail a {
    font-size: 20px;
    text-decoration: none;
}

div#copy {
    color: white;
    text-align: center;
    /* margin-bottom: 20px; */
    /* padding-bottom: 20px; */
    font-size: 15px;
    /* text-align: center; */
    /* margin: 10px; */
    padding: 10px 0 20px 0;
}

.button {
  font-size: 24px;
  color: #fff;
  border: 4px solid #fff;
  background: transparent;
  line-height: 2;
  width: 300px;
  height: 120px;
  transition: 0.5s;
}

.button:hover {
  border: 4.3px solid #fff;
  width: 310px;
  height: 130px;
}

.button
{
  position: absolute;
  /*top: 50%;*/
  left: 50%;
  transform: translate(-50%, -50%);
}
.modalScroll
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ScrollContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal {
  display: none;
    height: 100vh;
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 0;
}
.modal_bg {
  background: rgba(0, 0, 0, 0.32);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.js-modal-close {
  color: #555;
}

.modalScroll {
      background: #fff;
    /* height: 400px; */
    /* width: 400px; */
    max-height: 800px;
    padding: 20px;
    border-radius: 20px;
    height: 80%;
    width: 80%;
    max-width: 1000px;
}
.ScrollContent {
      overflow-y: scroll;
    height: 95%;
    /* max-height: 350px; */
    width: 90%;
    border-radius: 20px;
}
::-webkit-scrollbar {
  border-radius: 10px;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #b6b6b6;
  border-radius: 10px;
}

.modal_content h1,
.modal_content {
  color: rgb(49, 49, 49);
  text-align: center;
  /*padding-top: 150px;
  padding-bottom: 150px; */
}

.modal_content P {
	font-size: 18px;
	text-align: center;
}
.ScrollContent .modal_content p {
}
.ScrollContent .modal_content .modal_text {
	text-align: left;
}
.modal_content p img {
}

@media (max-width: 768px) {
  #modal.appear {
  width: 75%;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 @media screen and (max-width: 767px) {
     .flexbox {
         display: block;
		 margin: 0px;
		 
     }
     .flexbox .box1 {
         width: 90%;
         margin: 0 auto;
     }
     .flexbox .box2 {
         width: 80%;
         margin: 0 auto;
     }
	 
	 
 }	



/* -------------------------------------------- */
/*  ▼ タブレット以上の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 600px) {

  .flex-container{
    flex-direction: row;
  }

} /* end @media */
/* -------------------------------------------- */
/*  ▼ タブレット横持ち/PCの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 1024px) {



} /* end @media */

     @media screen and (max-width: 800px) {
        .parent {
          flex-wrap: wrap;
        }
      }
@media screen and (max-width: 400px) {
        .parent {
          display: block;
        }
#modal-btn {
	        FONT-WEIGHT: 600;
        width: 80%;
        max-width: 480px;
        height: auto;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.7);
        border: none;
        color: white;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 24px;
}
	
.gathe {
    /* background-color: #03BDF0; */
    margin-top: 10px;
    margin-bottom: 0px; 
}
	
.parent.gathe {
    background-color: #cccccc;
    display: flex;
    float: none;
    margin-top: 0px;
    width: 95%;
}	
.mail   {
}
.mail a  {
	color: #000000;
	text-decoration: none;
	float: none;
	margin-left: autopx;
	margin-right: auto;
	width: 80%;
	font-weight: 600;
	text-align: center;
}
#container .mail .mail {
	width: 80%;
	max-width: 320px;
}
	
div.child.battle {
    font-size: 15px;
    text-align: center;
    margin: 0px; 
    padding: 0px;
}	

main .scribe .scribe {
   margin-top: 0px; 
}
	
        #container main .scribe {
                width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 00px;
        min-width: 200px;
    }
    
section.scribe {
    width: 90%;
	margin-top: 30px;
}
	
	
#container main .what {
    /*margin-top: 18px;
    margin-bottom: 20px; */
	        position: relative;
}
.container {
    max-width: 1200px;
    margin: auto;
    /* padding-left: 1.5rem; */
    /* padding-right: 1.5rem; */
}	
.container.section-padding.sns {
}
#container {
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        padding: 0px 0px 00px 0px;
        min-width: 280px;
        width: 100%;
}	
	
.info {
/* background-color: #FBB93D; */
/* margin-top: 50px; */
}

.parent.sns {
    /* background: lightblue; */
    display: flex;
    width: 50%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    /* float: left; */
    justify-content: space-around;
    align-content: space-between;
    flex-wrap: nowrap;
}
h2.text-white.text-center {
    font-size: 24px;
}	

    .mail a {
        color: #000000;
        text-decoration: none;
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        font-weight: 600;
        text-align: center;
        font-size: 20px;
    }

#base #container .mail {
    /* font-style: normal; */
    /* font-size: 30px; */
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}
 }