@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* 全体の設定
================================================== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
  margin:0;
  padding:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
  font-style:normal;
}
ul ol{
  list-style:none;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}
q:before,q:after{
  content:'';
}
object,embed{
  vertical-align:top;
}
legend{
  display:none;
}
h1,h2,h3,h4,h5,h6{
  font-size:100%;
}
img,abbr,acronym,fieldset{
  border:0;
}
body{
  font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
  font-weight: 300;
  -webkit-text-size-adjust:100%;
  overflow-x: hidden;
  color: #000;
}
a{
  text-decoration: none;
}
a:hover, .active{
  text-decoration: none;
}
a:active, a:focus,input:active, input:focus{
  outline:0;
}


/* 共通の設定
================================================== */

img{
  max-width: 100%;
  height: auto;
}
section{
  clear:both;
  padding: 0;
}
.margin_bottom_20 {
  margin-bottom: 20px;
}
.margin_bottom_30 {
  margin-bottom: 30px;
}
.margin_bottom_50 {
  margin-bottom: 50px;
}
.margin_bottom_80 {
  margin-bottom: 80px;
}
.margin_bottom_100 {
  margin-bottom: 100px;
}
.margin_bottom_200 {
  margin-bottom: 200px;
}
.margin_bottom_300 {
  margin-bottom: 300px;
}


/*ヒーローエリア
================================================== */
#main{
  max-width: 1000px;
  text-align: center;
  margin: 20px auto 0;
}
#main img{
  width: 100%;
}
#main p{
  margin: 50px 0;
  padding: 0;
  line-height: 30px;
}
.mokuzi {
  width: 500px;
  margin: 50px auto 30px;
  border-radius: 3px;
  background-color: #f7f7f7;
}
.mokuzi div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #4fafb0;
  color: #fff;
  font-weight: 600;
  font-size: 1.1em;
}
.mokuzi ol {
  list-style-type: disc;
  margin: 0;
  overflow: hidden;
}
.mokuzi > ol {
  padding: 1em 1em 1em 3em;
}
.mokuzi ol ol {
  margin-top: 5px;
  padding-left: 1.1em;
}
.mokuzi li {
  text-align: left;
  padding: 5px 0;
  font-weight: 600;
}
.mokuzi ol ol li {
  font-weight: 500;
  font-size: .9em;
}
.mokuzi a {
  color: #333;
  text-decoration: none;
}


/* 目次の中身
================================================== */
.mokuzi2{
  max-width: 700px;
  width: 100%;
  margin: 0 auto -10px;
  padding: 0;
}
.mokuzi2 h1 {
  padding: 0.5em;
  color: #494949;
  background: #fffaf4;
  border-left: solid 5px #4fafb0;
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.5rem;
  margin: 100px 0 30px;
  letter-spacing: 3px;
}
.mokuzi2 h2 {
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.2rem;
  margin: 50px 0 20px;
}
.mokuzi2 p{
  text-align: left;
  font-size: 0.9rem;
  color: #333;
}


/* 下から上にフェードイン
================================================== */
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}


/* アイテム 見出し
================================================== */
.item{
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.item h3 {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.5rem;
  margin-bottom: 100px;
  border-bottom: 1px solid #808080;
  letter-spacing: 3px;
}
.item p {
  font-size: 0.9rem;
  line-height: 30px;
  text-align: left;
}


/* アイテム 2カラム
================================================== */
.column-2{
  max-width: 700px;
  width: 100%;
  margin: 100px auto 0;
  padding: 0;
  text-align: center;
}
.column-2 h3 {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.5rem;
  margin-bottom: 80px;
  border-bottom: 1px solid #808080;
  letter-spacing: 3px;
}
.column-2 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
.column-2 li {
  width: calc((100% - 20px) / 2);
  height: 450px;
  margin: 0 0 10px;
  list-style: none;
}
.column-2 li p{
  text-align: center;
  font-size: 0.7rem;
  margin-top: 20px;
  letter-spacing: 1px;
}


/* アイテム 3カラム
================================================== */
.column-3{
  max-width: 700px;
  width: 100%;
  margin: 100px auto 0;
  padding: 0;
  text-align: center;
}
.column-3 h3 {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.5rem;
  margin-bottom: 80px;
  border-bottom: 1px solid #808080;
  letter-spacing: 3px;
}
.column-3 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
.column-3 li {
  width: 30%;
  height: 300px;
  margin: 0 0 30px;
  list-style: none;
}
.column-3 ul::after {
  content: "";
  display: block;
  width: 30%;
  height: 0;
}
.column-3 li p{
  text-align: center;
  font-size: 0.7rem;
  margin-top: 20px;
  letter-spacing: 1px;
}


/* アイテム 3カラム
================================================== */
.column-4{
  max-width: 700px;
  width: 100%;
  margin: 100px auto 0;
  padding: 0;
  text-align: center;
}
.column-4 h3 {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.5rem;
  margin-bottom: 80px;
  border-bottom: 1px solid #808080;
  letter-spacing: 3px;
}
.column-4 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
.column-4 li {
  width: 24.5%;
  height: 250px;
  margin: 0 0 30px;
  list-style: none;
}
.column-4 ul::before,
.column-4 ul::after {
  content: "";
  display: block;
  width: 24.5%;
  height: 0;
}
.column-4 ul:before {
  order:1;
}
.column-4 li p{
  text-align: center;
  font-size: 0.7rem;
  margin-top: 20px;
  letter-spacing: 1px;
}


/* ボタン
================================================== */
#btn{
  text-align: center;
  margin: 20px auto 0;
}
.btn-flat-border{
  display: inline-block;
  width: 320px;
  padding: 1em 3em;
  text-decoration: none;
  color: #62c1c2;
  border: solid 2px #62c1c2;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #62c1c2;
  color: white;
}




/*スマホ用設定
================================================== */

@media only screen and (max-width: 768px) {
#main{
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
#main img{
  width: 90%;
  margin: 50px auto 0;
  padding: 0;
}
#main p{
  margin: 50px 0;
  padding: 0;
  line-height: 30px;
  font-size: 0.8rem;
}
.mokuzi {
  width: 90%;
  margin: 50px auto 30px;
  border-radius: 3px;
  background-color: #f7f7f7;
}

.mokuzi div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #4fafb0;
  color: #fff;
  font-weight: 600;
  font-size: 1.1em;
}

.mokuzi ol {
  list-style-type: disc;
  margin: 0;
  overflow: hidden;
}

.mokuzi > ol {
  padding: 1em 1em 1em 3em;
}

.mokuzi ol ol {
  margin-top: 5px;
  padding-left: 1.1em;
}

.mokuzi li {
  text-align: left;
  padding: 5px 0;
  font-weight: 600;
}

.mokuzi ol ol li {
  font-weight: 500;
  font-size: .9em;
}

.mokuzi a {
  color: #333;
  text-decoration: none;
}


/* 目次の中身
================================================== */
.mokuzi2{
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.mokuzi2 h1 {
  padding: 0.5em;
  color: #494949;
  background: #fffaf4;
  border-left: solid 5px #4fafb0;
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.5rem;
  margin: 100px 0 30px;
  letter-spacing: 2px;
}
.mokuzi2 h2 {
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.1rem;
  margin: 50px 0 20px;
  padding: 0 5px;
}
.mokuzi2 p{
  text-align: left;
  font-size: 0.9rem;
  color: #333;
  padding: 0 10px;
}



/* アイテム 見出し
================================================== */
.item{
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.item h3 {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-weight:700;
  font-size: 1.4rem;
  margin-bottom: 50px;
  border-bottom: 1px solid #808080;
  letter-spacing: 0;
}
.item p {
  font-size: 0.9rem;
  line-height: 30px;
}
    
    
/*アイテム 2カラム
================================================== */
.column-2{
  max-width: 90%;
}
.column-2 h3 {
  margin: 0 0 50px; 
  font-size: 1.4rem;
}
.column-2 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
.column-2 li {
  width: calc((100% - 20px) / 2);
  height: 250px;
  margin: 0 0 10px;
  list-style: none;
}
.column-2 li p{
  text-align: left;
  font-size: 0.8rem;
  margin-top: 10px;
  letter-spacing: 0;
}
    
    
/*アイテム 3カラム
================================================== */
.column-3{
  max-width: 90%;
}
.column-3 h3 {
  margin: 30px 0 50px; 
  font-size: 1.4rem;
  letter-spacing: 1px;
}
.column-3 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
.column-3 li {
  width: 30%;
  height: 200px;
  margin: 0 0 30px;
  list-style: none;
}
.column-3 ul::after {
  content: "";
  display: block;
  width: 30%;
  height: 0;
}
.column-3 li p{
  text-align: left;
  font-size: 0.7rem;
  margin-top: 10px;
  letter-spacing: 0;
}
    
    
/*アイテム 4カラム
================================================== */
.column-4{
  max-width: 90%;
}
.column-4 h3 {
  margin: 30px 0 50px; 
  font-size: 1.4rem;
  letter-spacing: 1px;
}
.column-4 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}
.column-4 li {
  width: 30%;
  height: 200px;
  margin: 0 0 30px;
  list-style: none;
}
.column-4 ul::after {
  content: "";
  display: block;
  width: 30%;
  height: 0;
}
.column-4 li p{
  text-align: left;
  font-size: 0.7rem;
  margin-top: 10px;
  letter-spacing: 0;
}
    
    
/*ボタン
================================================== */
#btn{
  text-align: center;
  margin: 10px auto 0;
}
.btn-flat-border{
  display: inline-block;
  width: 250px;
  padding: 1em 3em;
  text-decoration: none;

  color: #62c1c2;
  border: solid 2px #62c1c2;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #62c1c2;
  color: white;
}
}

/* PCのみ
================================================== */

@media(max-width:788px){
.pc{
  display: none !important;
  }
}
  
/* SPのみ
================================================== */

@media(min-width:789px){
.sp{
  display: none !important;
  }
}