@charset "utf-8";

/* Body
===================================================== */

.bg-body {
	background-image: url(../img/bg.jpg);
	background-size: 100%;
}

@media (max-width: 575.98px) {
.index-shizumi {
	background-image: url(../img/bg_shizumi.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 60%;
	background-attachment: local;
}
}

@media (min-width: 576px) {
.index-shizumi {
	background-image: url(../img/bg_shizumi.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 35%;
	background-attachment: fixed;
}
}

/* Google fonts
=========================================== */

.sawarabi-mincho {
	font-family: 'Sawarabi Mincho', sans-serif;
}

.parisienne {
	font-family: 'Parisienne', cursive;
}

.kosugi-maru {
	font-family: 'Kosugi Maru', sans-serif;
}

.m-plus-rounded-1c {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}



/* Property
===================================================== */

h1 {
	font-size: 1.2rem;
	color: #FFF;
	font-style: italic;
	text-align: center;
	margin-top: .5rem;
}
h1 span {
	font-size: 1rem;
}
h2 {
	font-size: 1.3rem;
	color: #FFF;
	line-height: 3rem;
}
h3 {
	font-size: 18px;
	color: #FFF;
}
h4 {
	font-size: 18px;
	color: #FFF;
}
h5 {
	font-size: 1.1rem;
	font-style: italic;
	color: #FFF;
}
h6 {
	font-size: 1rem;
}
p {
	font-size: 1rem;
	color: #FFF;
}
h1, h3, h4, h5, h6, p {
	line-height: 1.5rem;
}


/* Link
=========================================== */

/* 未訪問時のリンクカラー
---------------------------------- */
.nav-bar a:link {
	color: #CFF7F6 !important;
}
/* 訪問済みリンクカラー
---------------------------------- */
.nav-bar a:visited {
	color: #CFF7F6 !important;
}
/* カーソルが乗っているリンクカラー
---------------------------------- */
.nav-bar a:hover {
	color: #CFF7F6 !important;
	background: #FFF !important;
	font-weight: 500 !important;
}
/* クリックした瞬間に輝くリンクカラー
---------------------------------- */
.nav-bar a:active {
	color: #CFF7F6 !important;
}

/* 未訪問時のリンクカラー
---------------------------------- */
.main-body a:link {
	color: #CFF7F6;
	text-decoration: none;
}
/* 訪問済みリンクカラー
---------------------------------- */
.main-body a:visited {
	color: #CFF7F6;
}
/* カーソルが乗っているリンクカラー
---------------------------------- */
.main-body a:hover {
	color: #FFF;
	background: #4343b9;
}
/* クリックした瞬間に輝くリンクカラー
---------------------------------- */
.main-body a:active {
	color: #CFF7F6;
}


#header a:hover {
	background: none !important;
}


/* Nav
===================================================== */

#nav {
	background-color: #f8f8ff;
	padding: 1rem;
}
#nav p {
	text-align: center;
}


/* Section
===================================================== */

ul {
	line-height: 1.5rem;
	color: #FFF;
}
.ul-1 li {
	list-style-type: circle;
}
.ul-2 li {
	list-style-type: disc;
	font-size: 1rem;
}
.ul-3 li {
	list-style-type: disc;
	font-size: 1rem;
	line-height: 2rem !important;
}
.ul-4 li {
	list-style-type: lower-roman;
	font-size: 1rem;
}

.section-info {
	margin: 1.8em 0;
}
.section-info hr {
	width: 60%;
	margin-top: 3rem;
	margin-bottom: 3rem;
}
.section-info li {
	margin-bottom: .5rem;
}
.section-info h3 {
	color: #66525c;
}
.section-info h4 {
	color: #FFF;
}
.section-info p {
	background-color: rgba(63,105,179,0.8);
}


.introduction h2 {
	color: #FFF;
	margin: 200px auto;
	font-size: 1.75rem;
}

.index-line img {
	height: .28rem;
	margin-bottom: .7rem;
}

.max-width-100 img {
	max-width: 100%;
	max-height: 500px;
}

.max-width-80 img {
	max-width: 80%;
	max-height: 400px;
}

@media (max-width: 575.98px) {
h1 {
	font-size: .9em;
}
.section-info h3 {
	margin-left: 3%;
}
.section-info h4 {
	margin-left: 3%;
}
.section-info p {
	margin: 0 10%;
}
.section-info audio {
	margin-left: 3%;
}
.section-info li {
	margin-left: 2%;
}
.ul-1 li {
	margin-left: 3%;
}
.ul-2 li {
	margin-left: 5%;
}
.ul-3 li {
	margin-left: 5%;
}
.mailform {
	margin: auto 0%;
}
}

@media (min-width: 576px) {
.section-info h3 {
	margin-left: 8%;
}
.section-info h4 {
	margin-left: 8%;
}
.section-info p {
	margin: 0 12%;
}
.section-info audio {
	margin-left: 8%;
}
.section-info li {
	margin-left: 8%;
}
.ul-1 li {
	margin-left: 8%;
}
.ul-2 li {
	margin-left: 12%;
}
.ul-3 li {
	margin-left: 12%;
}
.mailform {
	margin: auto 12%;
}
}

@media (min-width: 768px) {
.section-info h3 {
	margin-left: 15%;
}
.section-info h4 {
	margin-left: 15%;
}
.section-info p {
	margin: 0 20%;
}
.section-info audio {
	margin-left: 15%;
}
.section-info li {
	margin-left: 15%;
}
.ul-1 li {
	margin-left: 15%;
}
.ul-2 li {
	margin-left: 20%;
}
.ul-3 li {
	margin-left: 20%;
}
.mailform {
	margin: auto 30%;
}
}



/* Footer
===================================================== */

.footer {
	height: 80px;
	color: none;
}

.footer p {
	text-align: center;
	color: #FFF;
	padding: 1rem 0;
}

.footer-copyright {
	background-color: none;
}

.footer-copyright p {
	text-align: center;
	color: #FFF;
}


/* 下層index.html専用
===================================================== */

.line02 {
	margin: 20px 0;
}






/* Readmore
===================================================== */

.readmore-button-box a {
   background-color: #66525c; /* ボタンの色 */
   color: white;              /* ボタンの文字色(白) */
   border-radius: 18px;       /* 角丸の半径 */
   padding: 0.3rem .8rem;;     /* 内側の余白 */
   display: inline-block;     /* ボタン全体をクリック可能に */
   font-size: .8rem;         /* ボタンの文字サイズ */
}
.readmore-button-box a:hover {
   background-color: white;     /* ボタンにマウスが乗ったら色が変化 */
   color: #66525c;
}
.readmore-area {
   display: none;   /* デフォルトでは非表示にしておく */
}
.readmore-button-box-blue a {
   background-color: #4343b9; /* ボタンの色 */
   color: white;              /* ボタンの文字色(白) */
   border-radius: 18px;       /* 角丸の半径 */
   padding: 0.3rem .8rem;;     /* 内側の余白 */
   display: inline-block;     /* ボタン全体をクリック可能に */
   font-size: .8rem;         /* ボタンの文字サイズ */
}
.readmore-button-box-blue a:hover {
   background-color: white;     /* ボタンにマウスが乗ったら色が変化 */
   color: #4343b9;
}


/* illustration専用
===================================================== */

.section-illustration-main img {
	margin-bottom: 3rem;
}
.section-illustration-main a:hover {
	background: none !important;
}


/* subaru専用
===================================================== */

.section-profile p {
	margin-bottom: 1rem;
}
.section-links p {
	margin-bottom: 1rem;
}


/* box
===================================================== */

.box14 {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
    display: inline-block;
}

.box14 p {
    margin: 0; 
    padding: 0;
}

.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px #f6fbf6;
    border-bottom: solid 2px #f6fbf6;
    display: inline-block;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #f6fbf6;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}


/* 小さめボタン */
.btn1_small {
  position: relative;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  /* width: 100%; */
  max-width: 220px; /* ボタンの最大幅 */
}

.btn1_small::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  /* width: 100%; */
  height: 100%;
  -moz-border-radius: 80vh;
  -webkit-border-radius: 80vh;
  border-radius: 80vh;
  /* background-color: rgba(34,63,158,.6); /* 後ろの背景色 rgba半透明にアレンジ*/
}

.btn1_small span {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold; /* 文字の太さ */
  border-radius: 80vh;
  border: dotted 3px #5D5556; /* 線の色　文字より少し薄い茶 */
  color: #3F383A; /* 文字色　こげ茶 */
  padding: .6em .8em;
  background-color: rgba(255,255,255,.88); /* 背景色 */
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* マウスオーバーした際のデザイン */
.btn1_small:hover span {
  background-color: rgba(208,193,194,.4); /* 背景色 rgba(93,85,86,.08) */
  transform: translate(4px, 4px);
  transition: all 0.3s ease-in-out;
}

.btn1_small {
  border-bottom: none !important; /* 要素追加 */
}

.btn1_small:hover {
  background: none !important;
}

@media (max-width: 575.98px) {
  .btn1_small {
  width: 49%;
}
}

@media (min-width: 576px) {
  .btn1_small {
  width: 49%;
}
}

@media (min-width: 680px) {
  .btn1_small {
  width: 24%;
}
}

@media (min-width: 768px) {
  .btn1_small {
  width: 24%;
}
}

.marginbottom_half {
  margin-bottom: .6rem;
}



@media (max-width: 575.98px) {
  .koibumi {
  margin-left: none !important;
}
}

@media (min-width: 576px) {
  .koibumi {
  margin-left: 15% !important;
}
}