@charset "utf-8";
/* 全体設定 */
html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 100%;
    color: rgb(35, 35, 35);
}

h1,h2,h3,h4,p,ul,ol {
    margin-top: 0;
    line-height: 1.7;
}
img {
	max-width: 100%;
}

/* ヘッダー（タイトルロゴ） */
.header-line {
    padding: 1.5rem 0;
    text-align: center;
    color: #ffffff;
    background-color: #075071;
}

.header-line img,
.copy img{
    transition: all 0.3s ease-in-out
}

.header-line img:hover,
.copy img:hover {
    transform: scale(1.1);
  }

/* リンクの動き */
a:link {
	color: rgb(246, 220, 21);
	text-decoration: none;
}

a:visited {
	color:  rgb(246, 220, 21);
	text-decoration: none;
}

a:hover {
	color:  orange;
	text-decoration: underline;
}

/* ナビゲーション */

#menu-on-off {
    display: none;
}

.gloval-nav {
    list-style: none;
    padding-left: 0;
    padding-top: 1.5rem;
}

.gloval-nav__item {
    width: 100%;
    padding-top: 2rem;
    font-size: 1.3rem;
    text-align: center;
    border-bottom: 1px solid #f4faf9;
}

nav {
    position: fixed;
    top: 0;
    right: -1000px;

    width: 300px;
    height: 500px;
    padding-top: 5rem;
    padding-left: 1rem;

    background-color: #075071;
    opacity: 0.9;
    transition: all 0.3s linear;
    z-index: 100;
}

.menu-btn {
    display: flex;
    justify-content: center;
    position: fixed;
  
    top: 1.2rem;
    right: 1rem;
    width: 4rem;
    height: 4rem;
    z-index: 50;
    border-radius: 0.3rem;
  
    background-color: #075071; 
    z-index: 110;
    cursor : pointer;
}

#menu-on-off:checked~nav {
    right: 0px;
}



/* メインの設定 */
.page-header {
    text-align: center;
    margin: 0 auto;
}

main{
     max-width: 1000px;
     margin: 0 auto;  
}

.index {
    background-color: #075071;   
    margin-bottom: 0;
}

.index-bgr {
    background-image: url(../images/bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
    max-width: 1000px;
    margin: 0 auto;
    
}

.intro-text {
 letter-spacing: 0.8rem;
 color: #ffffff;
 text-shadow: 4px 4px 0px rgba(12, 25, 57, 1), 8px 8px 0px rgba(0, 0, 0, 0.2);
 font-weight: bold;
 font-size: 1.8rem;
 text-align: center;
 padding: 5rem 0;
}

.index-sec {
    display: flex;
    justify-content: center;
}

/* コンテントエリア（カード）の設定 */
.content-area{
    max-width: 800px;
    background-color: #efe7d3;
    box-shadow: inset 0px 12px 25px 5px rgba(171, 122, 66, 0.4);
    z-index: 2;
    padding: 2rem;
    margin: 8rem 2rem;
    border-radius: 20px;
}

.content-area a:link{
   text-decoration: none;
   color: black;
}

.content-area a:hover{
    opacity: 0.7;
    text-decoration: none;
    color: black;
}

.content-area a:visited{
    text-decoration: none;
    color: black;
 }

.content-area__img,
.content-area h3{
   text-align: center;
}



.nextstage {
    text-align: center;
    margin: 25rem auto 2rem;
    color: #ffffff;
    text-shadow: 4px 4px 0px rgba(12, 25, 57, 1), 8px 8px 0px rgba(0, 0, 0, 0.2);
    font-size: 2rem;
}

.gotop {
    margin-bottom: 0;
    text-align: end;
}

.gotop a:hover {
    opacity: 0.7;
}


/* フッターの設定 */
.copy{
    background-color: #075071;
    padding: 5rem 1rem;
    margin-bottom: 0;
    text-align: center;
    color: #ffffff;
}

/* レスポンシブ */
@media(max-width:600px) {
  .header-line img,
  .menu-btn img{
    width:70%;
  }

  .menu-btn{
    width: 2rem;
    height: 2rem;
  }

}