@charset "UTF-8";
*{
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
	color: #333;
	line-height: 2;
	letter-spacing: 0.5;
}

*, *:before, *:after {
	box-sizing: border-box;
}

ul{
	list-style: none;
}

a{
	text-decoration: none;
}


/*========= 基本スタイル========= */
body,
html {
	margin: 0 auto;
	letter-spacing: 2px;
	font-size: 12px;
    color: #333;
	overflow-x: hidden;
}

.container {
    width: 80%;
    max-width: 800px;
    margin:100px auto 100px auto;
    background: white;
    padding: 70px 70px 90px 70px;
    border: 1px solid #9f9f9f;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    margin: 100px 0 40px 0;
    font-size: 32px;
}

h2{
    margin: 50px 0 10px 0;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
}

/* 追加のスタイル例 */

section + section {
    margin-top: 20px;
}

.menu .nav {
    left: 10px
}

section a{
    color: #7f7f7f;
    border-bottom: 1px solid #7f7f7f;
}




/*========= ナビ ===============*/

header{
	position: fixed;/*header固定*/
	height: 80px;/*Headerの高さ設定*/
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:#fff;
	color:#333;
	z-index: 10000;
    font-size: 13px;
}

header img{
	height: 80px;
	margin: 0 auto 0 80px;
}


/* 以下はレイアウトのための CSS*/

nav{
	margin: 0 30px 0 auto;
}

nav ul{
    list-style: none;
    display: flex;
	justify-content: flex-end;
}

nav ul li a{
    display: block;
    text-decoration: none;
    color: #666;
    padding:10px;
    transition:all 0.3s;
}

nav ul li a:hover{
    color:#c5c5c5;
}

@media screen and (max-width:768px) {
    nav ul li a:hover{
    color: #666;
    }

    nav ul li.current a {
    color:#c5c5c5;
    }

	header img{
		height: 80px;
		margin: 0 auto 0 0;
	}

	nav{
		font-size: 10px;
		margin: 0 10px 0 auto;
	}

}

@media screen and (max-width:256px) {
	#g-nav li{
		display: none;
	}

	#g-nav li:nth-child(1){
	display: block;
	}

}

.external-link-btn {
    display: block;
    text-decoration: none;
    color: #fff; /* 文字色 */
    background-color: #989898; /* 背景色 */
    padding: 10px; /* パディング */
    border-radius: 5px; /* ボーダーラジアス */
    transition: all 0.3s; /* トランジション効果 */
	margin: 0 0 0 50px;
}

.external-link-btn:hover {
    background-color: #666; /* ホバー時の背景色 */
    color: #ffffff; /* ホバー時の文字色 */
}


@media screen and (max-width:768px) {
	.external-link-btn {
		display: block;
		text-decoration: none;
		color: #fff; /* 文字色 */
		background-color: #989898; /* 背景色 */
		padding: 5px; /* パディング */
		border-radius: 5px; /* ボーダーラジアス */
		transition: all 0.3s; /* トランジション効果 */
		margin: 6px 0 0 10px;
	}
	
	
	
}






/*======== footer ======== */

.footer__social a {
    display: inline-block;
    width: 30px;
    opacity: 0.7;
	color: #666;
	margin: 5px 0 0 0;
}

.footer__social a:not(:last-child) {
    margin-right: 16px;
}
  
.footer {
	padding: 2rem;
	font-size: 12px;
	color: #989898;
	background: #fff;
	border-top: 1px solid #cdcdcd;
	margin: 50px 0 0 0;
}

.pp {
	color: #989898;
	text-decoration: none;
	margin: 0 0 10px 0;

}

.footer p:nth-child(2){
	margin: 20px 0  0 0px;
	color: #666;
}

.footer a:hover {
	color: #000;
}


  
  @media (min-width: 768px) {
	.footer {
	  display: flex;
	  justify-content: space-between;
	}
  
	.md-flex {
	  display: flex;
	}
  
	.md-flex li + li {
	  margin-left: 16px;
	}

	.footer p:nth-child(2){
		text-align: right;
		margin: 0 0 0 auto;
		padding: 10px 0 0 0;

	}
	
	.footer {
		margin: 50px 0 0 0;
	}

	.footer__social a {
		margin: 5px 10px 0 10px;
	}
	


  }