@charset "UTF-8";

/* -----------------------------------------

Base

-------------------------------------------- */

* {
  box-sizing: border-box;
}

a {
  opacity: 1;
  transition: 0.3s;
}

a:hover {
  opacity: 0.7;
  transition: 0.3s;
}

/* -----------------------------------------

Color

-------------------------------------------- */
.bg_brown {
  background-color: #641808;
}
.bg_category01 {
  background-color: #ad7319;
}
.bg_category02 {
  background-color: #341100;
}
.bg_category03 {
  background-color: #3e8548;
}
.bg_category04 {
  background-color: #d04882;
}
.bg_category05 {
  background-color: #2d66af;
}

/* -----------------------------------------

Image

-------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* -----------------------------------------

List

-------------------------------------------- */

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -----------------------------------------

Text

-------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font-feature-settings: 'palt';
}

.txt_br_md_hidden {
  display: inline;
}

.txt_br_md {
  display: none;
}

.txt_br_sm {
  display: none;
}

html {
  position: relative;
  font-size: 62.5%;
  min-height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  -webkit-text-size-adjust: 100%; /*  sp横向き文字サイズ固定 */
  font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ',
    sans-serif;
  font-weight: 500; /*游ゴシック Windows Chrome　かすれ対策*/
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  overflow-y: scroll;
}
/* -----------------------------------------

Area01

-------------------------------------------- */
.area_01 {
  width: 50%;
  position: fixed;
}
.area_01_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../images/main_bg_lg.jpg);
  background-size: contain;
  background-repeat: repeat-y;
  height: 100vh;
  padding-bottom: 60px;
}
.area_01_inner_contents {
  width: 35.1390922%;
  padding-top: 50px;
  position: relative;
}
.area_01_txt {
  margin-bottom: 15px;
}
.area_01_btn li a {
  display: block;
  margin-bottom: 8px;
}
.area_01_btn li:last-child a {
  margin-bottom: 0;
}
/* -----------------------------------------

Area02

-------------------------------------------- */
.area_02 {
  width: 50%;
  background-color: #f5c372;
  margin-left: auto;
  z-index: 1;
}
.area_02_main {
  width: 450px;
  box-shadow: 4px 4px 8px #888, -4px -4px 8px #888;
  background-color: #eee6d1;
}
.header {
  width: 100%;
  max-width: 750px;
  background-image: url(../images/main_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding: 40px;
}
.header_logo img {
  width: 72.8%;
  margin: auto;
}
.category_header {
  width: 100%;
  max-width: 750px;
  padding: 20px;
  background-color: #eee6d1;
}
.intro_txt {
  padding: 20px;
  font-weight: bold;
}
.form_btn_area {
  padding: 0 20px 20px 20px;
}
.form_btn {
  display: block;
  margin: 25px 0;
}
.area_02_btn_wrapper {
  padding: 0 20px 30px;
}
.area_02_btn li a {
  display: block;
  margin-bottom: 10px;
}
.area_02_btn li:last-child a {
  margin-bottom: 0;
}

.item_area {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.item_area div {
  width: calc((100% - 10px) / 2);
  background-color: #fff;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 20px;
}
.item_area div:nth-child(even) {
  margin-right: 0;
}
.item_area div img {
  margin-bottom: 10px;
}
.item_sub {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 5px;
}
.item_title {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 10px;
}
.item_text {
  font-size: 1.1rem;
  line-height: 1.4;
}
.home_btn {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.home_btn a {
  width: 15.2%;
  max-width: 114px;
}

/* -----------------------------------------

Animation

-------------------------------------------- */
.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
}
.js-fade.inview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition: opacity 2s, visibility 2s, transform 2s;
}

/* -----------------------------------------

Footer

-------------------------------------------- */

.footer {
  margin-top: auto;
  background-color: #fff;
}
.footer::before {
  width: 100%;
  display: block;
  content: '';
  border-top: 5px solid #000;
}
.footer_inner {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer_inner a {
  display: inline-block;
  width: 160px;
}
.footer_inner a img {
  position: relative;
  top: -10px;
  right: 0;
}
.footer_inner p {
  top: 20px;
  font-size: 1rem;
}

/* -----------------------------------------

Back to Top

-------------------------------------------- */

.is_page_top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  position: fixed;
  right: 0;
  bottom: 100px;
  background-color: #000000;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.is_page_top img {
  transform: rotate(180deg);
  vertical-align: middle;
  width: 50%;
}

@media screen and (max-width: 900px) {
  .area_01 {
    display: none;
  }
  .area_02 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
    font-size: 1.4rem;
  }
  .header {
    padding: 20px;
  }
  .area_02_btn_wrapper {
    padding: 0 20px 20px;
  }
  .category_header img {
    width: 100%;
  }
  .category_header {
    padding: 20px 10px;
  }
  .form_btn_area {
    margin: 10px 10px 20px 10px;
  }
  .form_btn {
    margin: 0;
  }
  .item_area {
    padding: 5px;
  }
  .item_area div {
    width: calc((100% - 5px) / 2);
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 14px;
  }
  .footer_inner a {
    width: 120px;
  }
}