@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
    font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 200;
	font-size: 18px;
	background-color: #fff;
}
body.fw-400 { font-weight: 400; }

/*===================================
    ヘッダー
===================================*/
#header-container-in {
	position: relative;
	display: flex;
	margin: auto;
	max-width: 100%;
	height: 90vh;
	padding: 10px 50px;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	background-image: url("images/top-bg.jpg");
	background-size: cover;
	background-position: bottom center;
}
#header-container-in.other-page {
	display: flex;
	height: auto;
	background-image: none;
	background-color: #0E70C9;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
#header {
	position: absolute;
	width: 339px;
	height: 342px;
	top: 50%;
	left: 50%;
	margin-left: -169.5px;
	margin-top: -171px;
}
#header-container-in.other-page #header {
	position: relative;
	width: 100px;
	height: auto;
	top: auto;
	left: auto;
	margin: 0px;
}
#header-container-in.other-page #header .logo { text-align: left; }
#header-container-in.other-page #header .logo a { display: inline-block; }
#header-container-in.other-page #header img { height: 60px; }
.header-in { display: block; flex-direction: none; justify-content: none; background-color: transparent; }
#header-container-in.other-page .header-in { text-align: left; }
.header-in .tagline { color: #fff; }
#header-container-in.other-page .tagline { display: none; }
#header-in.header-in.wrap { width: 100%; }
.site-name-text-link { padding: 0px; }
#top-message {
	position: absolute;
	width: 248px;
	height: 409px;
	top: 50%;
	left: 10%;
	margin-top: -204.5px;
}
#header-container-in.other-page #top-message { display: none; }

/*===================================
    ナビゲーション
===================================*/
/*#navi ul li .item-label { display: flex; align-items: center; }*/
#navi {
	position: absolute;
	background-color: transparent;
	top: 10px;
	right: 50px;
}
#header-container-in.other-page #navi { position: relative; top: auto; right: auto; }
#navi-in.wrap { width: 100%; }
#navi-in > ul { display: flex; text-align: right; margin: 0px; padding: 0px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
#navi ul li .item-label { color: #fff; }
.navi-in > ul li {
	display: inline-block;
	margin-left: 30px;
	width: auto;
	height: auto;
	line-height: normal;
	text-align: left;
	position: relative;
}
.navi-in > ul li::after {
	/*transition: width 0.3s ease-in-out;*/
}
.mobile-menu-button {
	position: absolute;
	margin: -20px 0px 0px 0px;
	padding: 0px;
	top: 50%;
	right: 20px;
	width: 40px;
	height: 40px;
	display: none;
}
.navi-in a {
	color: #fff;
	text-decoration: none;
	display: block;
	font-size: 18px;
	font-weight: 200;
	transition: none;
}
.navi-in a::after {
	content: "";
	display: block;
	width: 0%;
	height: 1px;
	background-color: #fff;
	margin: 0px auto;
	bottom: 0px;
	left: 100%;
	margin-left: -50%;
	position: absolute;
	transition: all 0.3s ease-in-out;
}
.navi-in a:hover {
	background-color: transparent;
	transition: none;
	color: #fff;
}
.navi-in a:hover::after {
	width: 100%;
	margin-left: -100%;
}


/*===================================
    コンテンツ
===================================*/
#content { min-height: 80vh; }
.content-in { display: block; }
#content-in.wrap { width: 1200px; }
.main { padding: 0px; width: 100%; border-radius: 0px; border: none; background-color: transparent; }
.content-home { margin-top: 0px; }
.content-home #content-in.wrap { width: 100%; }
.article ul li { margin: 0px; }
/*===================================
    HOME
===================================*/
#top-image { position: relative; width: 100%; height: 90vh; background-image: url("images/top-bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: bottom center; }
#top-image-icon { position: absolute; bottom: 16px; left: -42px; margin-left: 50%; text-align: center; }
/*
#top-image-foot { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; vertical-align: bottom; }
*/
.clip-image { position: relative; margin: 0px; padding: 0px; width: 100%; height: 62px; }
.clip-image-left { position: absolute; bottom: 0px; left: 0px; width: 40%; height: 62px; background: #fff; }
.clip-image-right { position: absolute; bottom: 0px; right: 0px; width: 40%; height: 62px; background: #fff; }
.clip-image-center {
    position: absolute;
    margin-left: 50%;
    bottom: 0px;
    left: -300px;
    width: 600px;
    height: 62px;
    background-image: url("images/top-image-foot.svg");
    background-position: center bottom;
    background-size: auto;
    background-repeat: no-repeat;
}
.narrow_on { display: none; }
.narrow_off { display: inline; }
#welcome { position: relative; margin: 0px; padding: 150px 0px; width: 100%; background-color: #fff; }
.center-1200 { margin: 0px auto; max-width: 1200px; min-width: 1023px; }
#welcome h1 {  margin: 0px auto 30px; padding: 0px; font-weight: 200; font-size: 36px; color: #23256E; text-align: center; }
#welcome .entry-title { margin: 0px; }
#welcome p { margin: 40px auto 0px; width: 842px; text-align: left; font-size: 18px; font-weight: 400; }
#welcome { background-image: url("images/about-bg.png"); background-size: cover; background-repeat: no-repeat; background-position: top center; }

#top-aside { padding: 90px 0px; background-color: #fff; }
#top-aside-box { position: relative; display: flex; justify-content: space-around; }
#top-aside .aside-box {
	width: 370px;
}
#top-aside .aside-title-box { position: relative; margin-bottom: 50px; }
#top-aside .aside-title {
	display: inline-block;
	position: absolute;
	padding: 0px 20px;
	width: auto;
	height: 54px;
	font-size: 28px;
	font-weight: 400;
	color: #fff;
	background-color: #07328F;
	bottom: -27px;
	left: 0px;	
}
#top-aside .aside-title::after {
	content: "";
	display: block;
	position: absolute;
	width: 0px;
	height: 0px;
	border-top: 27px #07328F solid;
	border-right: 27px transparent solid;
	border-bottom: 27px transparent solid;
	border-left: 27px #07328F solid;
	top: 0px;
	right: -54px;
}
#top-aside .aside-image {
	width: 370px;
	height: 242px;
	background-color: grey;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	overflow: hidden;
}
#top-aside .aside-button-box a {
	display: block;
	position: relative;
	padding: 10px 0px;
	width: 100%;
	border: 1px #07328F solid;
	border-radius: 100px;
	text-decoration: none;
	text-align: center;
	font-size: 24px;
	color: #07328F;
}
#top-aside .aside-button-box a::after {
	content: "";
	position: absolute;
	display: block;
	width: 0px;
	height: 0px;
	border-top: 14px transparent solid;
	border-rigth: 0px;
	border-bottom: 14px transparent solid;
	border-left: 14px #07328F solid;
	top: 50%;
	right: 30px;
	margin-top: -14px;
	transition: right 0.2s ease-in-out;
}
#top-aside .aside-button-box a:hover::after {
	right: 20px;
}
#top-aside .top-aside-decoration {
	position: absolute;
	display: inline-block;
}
#top-aside .butterfly-yellow { top: -70px; right: 10px; }
#top-aside .butterfly-pink { bottom: -120px; left: 10px; }

#top-news {
	padding: 180px 0px;
	background-color: #FDF4D2;
	background-image: url("images/news-bg.svg");
	background-position: bottom;
	background-repeat: repeat-x;
}
#top-news-box {
    display: flex;
    margin: 0px auto;
    padding: 50px 0px;
    width: 1000px;
    background-color: #fff;
    border-radius: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
#top-news .news-left { width: 256px; padding: 0px 10px 0px 60px; font-size: 18px; }
#top-news h1 { margin: 0px; padding: 0px; font-size: 36px; font-weight: bold; color: #F4CA1D; }
#top-news h1 span { display: block; margin-left: 8px; font-size: 18px; font-weight: bold; color: #F4CA1D; }
#top-news .news-center { position: relative; width: 1px; background-color: #FDF4D2; }
#top-news .news-center::after {
    content: url("images/top-news-icon.svg");
    position: absolute;
    display: inline-block;
    margin-top: -25px;
    margin-left: -25px;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
}
#top-news .news-right { width: 743px; }
#top-news ul,
#top-news ul li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#top-news ul { padding-left: 45px; }
#top-news dl, #top-news dt, #top-news dd { margin: 0px; padding: 0px; }
#top-news dl { display: flex; flex-wrap: nowrap; justify-content: flex-start; }
#top-news dt { width: 105px; color: #999999; }
#top-news dd { width: 548px; }
#top-news ul li { margin-top: 20px; }
#top-news ul li:first-child { margin-top: 0px; }
#top-news a { color: #3FA9F5; }

#bunner {
    margin: 80px auto;
    max-width: 1200px;
}
#bunner h1 {
	margin-bottom: 40px;
	width: 100%;
	text-align: center;
}
#bunner-box {
	width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
}
.bunner-item {
    margin: 0px;
    padding: 0px;
    width: 265px;
    text-align: center;
}

.footer {
    margin: 0px;
    padding: 0px;
    background-color: #F0F8FE;
    color: #140F4B;
	background-image: url("images/cloud-left.svg"), url("images/cloud-right.svg");
	background-repeat: no-repeat, no-repeat;
	background-size: auto;
	background-position: top left, top right;
}
#footer-in.wrap {
    margin: 0px auto;
    padding: 0px;
    width: auto;
    width: 100%;
}
#footer-box { margin: 0px auto; padding: 100px 10px 45px; max-width: 1200px; }
#footer-left { float: left; width: 480px; }
#footer-right { float: right; width: 690px; }

#footer-logo { width: 266px; margin: 0px auto; }
#footer-logo img { width: 266px; }
#footer-address address {
    font-size: 18px;
    font-style: normal;
    line-height: 1.4em;
	width: 250px;
	margin: 8px auto;
}
#footer-tel { margin-top: 16px; text-align: center; }
#footer-tel #footer-tel-box { font-size: 18px; font-weight: bold; margin: 30px auto 5px; line-height: 1em; }
#footer-tel p > span { margin-left: 6px; font-size: 36px; color: #3FA9F5; }
#footer-tel #footer-business-box { font-weight: 400; margin: 0px; }

#footer-sns { position: relative; margin: 10px auto; width: 100%; text-align: center; }
.footer-sns-item { position: relative; vertical-align: bottom; }
.footer-sns-item:hover { opacity: 0.7; }

#footer-contact { width: 100%; text-align: center; }
#footer-contact a {
	display: inline-block;
	margin: 0px;
	padding: 16px 80px;
	color: #fff;
	background-color: #07328F;
	text-decoration: none;
	border-radius: 100px;
	transition: all 0.3s linear;
}
#footer-contact a:hover {
	background-color: #3FA9F5;
}

#footer .footer-bottom {
	position: relative;
	width: 100%;
	height: 415px;
	background-image: url("images/footer-bg.svg");
	background-repeat: repeat-x;
	background-size: auto;
}
#footer .footer-bottom-content {
	position: absolute;
	bottom: 10px;
	left: 0px;
	width: 100%;
}

.copyright { margin-top: 20px; font-size: 18px; color: #fff; text-align: center; }

#admin-panel { display: none; }

/************************************
** パンくずリスト
************************************/
.wrap { width: 1200px; }
#breadcrumb.wrap { width: 1200px; background-color: transparent; }

/************************************
** ページ（サイドバー有）
************************************/
.main[data-class="double"] { display: flex; justify-content: space-between; }
article[data-class="double"] { margin-left: 0px; margin-right: 0px; width: 850px; }
/************************************
** サイドバー
************************************/
#original-sidebar { width: 300px; }
#side-menu { margin-bottom: 16px; }
#side-menu ul,
#side-menu li { margin: 0px; padding: 0px; list-style: none; }
#side-menu li { margin-bottom: 6px; }
#side-menu a {
    position: relative;
    display: flex;
    padding: 0px 10px 0px 20px;
    width: 300px;
    height: 50px;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    text-decoration: none;
    color: #0E70C9;
}
#side-menu a:hover { background-color: #FFFABF; }
#side-menu li:first-child > a { background-color: #0E70C9; color: #ffffff; font-weight: 400; }
#side-menu a.now { background-color: #FFFABF; }
#side-menu a.now::after {
    content: "";
    z-index: 2;
    display: block;
    position: absolute;
    margin: 0px;
    margin-top: -10px;
    padding: 0px;
    top: 50%;
    right: 10px;
    width: 0px;
    height: 0px;
    border-top: 10px transparent solid;
    border-left: 10px #0E70C9 solid;
    border-bottom: 10px transparent solid;
    border-right: none;
}
#original-sidebar #side-access { width: 100%; background-color: #fff; margin-bottom: 20px; padding-bottom: 10px; }
#original-sidebar .side-header {
    margin:0px;
    padding: 16px 10px;
    width: 100%;
    background-color: #0E70C9;
    color: #ffffff;
    font-weight: 400;
}
#original-sidebar .side-text,
#original-sidebar .side-map { width: 100%; margin: 10px 0px; padding: 0px 10px; }
#original-sidebar .side-text p { margin: 0px; padding: 0px; line-height: 1.2em; }


/************************************
** コンテンツ（本文）設定
************************************/
h1.entry-title { margin: 0px auto 30px; padding: 0px; font-weight: bold; font-size: 36px; color: #23256E; text-align: left; }
.article h2 { margin-top: 60px; font-weight: 400; color: #23256E; border: 1px #0E70C9 solid; background-color: #ffffff; border-bottom-left-radius: 20px; border-top-right-radius: 20px; }
.article h3 { font-weight: 400; color: #23256E; border-color: #23256E; background-color: #ffffff; }
.article h4 { font-weight: 400; color: #23256E; border-color: #23256E; }


/************************************
** 「てらすについて」設定
************************************/
.about-3lines {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
}
.about-3lines li {
    margin: 0px;
    padding: 0px;
    width: 300px;
    text-align: center;
    list-style: none;
}

#support-contents {
  padding: 0;
}

#support-contents li {
  color: black;
  position:relative;
  background: #EFF5FB;/*バーの色*/
  line-height: 1.5;
  padding: 0.5em;
  margin-bottom: 4px;
  border-left : solid 35px #07328F;/*先の色＝アイコン裏の色*/
  list-style-type: none!important;
}

#support-contents li:before {
	font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  display: block;
  padding: 0.5em;
  width: 1.2em;
  color: white; /*アイコン色*/
  font-weight: normal;/*アイコンは太字にしない*/
  text-align: center;
  left : -35px; /*左端からのアイコンまでの距離*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.service-dl {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	flex-shrink: 2;
}
.service-dl dt { font-weight: bold; }
.service-dl dt::after { content: "　：　"; }

.right-img { float: right; margin: 0px; margin-left: 20px; padding: 0px;  width: 300px; height: 200px; background-color: #ccc; overflow: hidden; }
.service-step-pc { display: block; width: 100%; }
.service-step-sp { display: none; width: 100%; }
.service-step-pc img { width: 100%; }
.service-step-sp img { width: 100%; }

.content-notice { font-size: 12px; color: #666; }

/************************************
** スタッフ紹介設定
************************************/
#staff ul,
#staff li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#staff li {
	box-sizing: border-box;
	margin-bottom: 20px;
	padding: 10px;
	/*background: rgba( 255, 255, 255, 0.5 );*/
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
}
#staff .staff-info { width: 648px; }
#staff .staff-face { width: 150px; }
#staff .staff-name {
	margin-bottom: 6px;
	padding-top: 4px;
	font-size: 24px;
	color: #07328F;
}
#staff .staff-rubi {
	margin-bottom: 10px;
	color: #999999;
}
#staff .staff-license {
	margin-bottom: 10px;
	border-top: 1px #DDDDDD solid;
	border-bottom: 1px #DDDDDD solid;
}
/*
.staff-card { display: flex; margin-bottom: 0px; padding: 60px 30px; border-bottom: 1px #ccc solid; align-items: center; justify-content: space-between; }
.staff-icon { width: 150px; height: 150px; overflow: hidden; border-radius: 75px; }
.staff-info {
    width: 600px;
}
.staff-name { font-size: 30px; font-weight: 400; border-left: 4px #23256E solid; padding: 0px 10px; }
.staff-rubi { font-size: 16px; margin-left: 30px; }
.staff-license { margin: 10px 0px; padding: 0px 10px; }
.staff-txt { line-height: 1.4em; }
*/

/************************************
** アクセス設定
************************************/
.access-name { font-size: 30px; }


/************************************
** ご利用方法設定
************************************/
.howto-list { display: flex; }
.howto-list:first-child { margin-top: 60px; }
.howto-list, .howto-list dt, .howto-list dd { margin: 0px; padding: 0px; }
.howto-list dt { width: 200px; }
.howto-list dd { width: 1000px; }
.howto-list span { display: inline-block; padding: 0px 20px; background-color: #23256E; border-radius: 50px; color: #fff; }
.howto-list ul { margin-bottom: 0px; }
.howto-list p { margin-top: 10px; margin-bottom: 0px; }


/************************************
** ご利用料金設定
************************************/
.price-table, .price-table th, .price-table td { border-color: #D9EEFD; }
.price-table th { font-weight: 100; color: #fff; background-color: #140F4B; }
.price-table tr:nth-child(even) { background-color: rgba( 255, 255, 255, 0.5 ); }
.price-table th, .price-table td { padding: 10px 20px; }
.price-table tr td:last-child { text-align: right; }


/************************************
** お問い合わせ・よくある質問設定
************************************/
#faq h3 { margin-top: 20px; margin-bottom: 0px; padding-left: 50px; }
#faq p { margin: 0px; padding: 20px 0px; }
.ac > li {
  /* margin-bottomにすると変な動きをするのでpaddingにする */
  padding-bottom: 6px; 
  list-style: none;
}
.ac-label  {
  cursor: pointer;
  position: relative;
}
.ac-content {
  display: none;
}
/* .ac-labelを親要素としてアイコン位置を絶対値で指定 */
.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
  background: #140F4B;
}
/* .icon-wrapの中でプラスを中央に位置させるために.iconを親要素に設定 */
.icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
/* プラスアイコン */
/* ２本の線を.icon-wrapの中央に並行に重ねる */
.icon:before,
.icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #fff;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
/* そのうち1本を縦にする */
.icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* プラスアイコンクリック後、マイナスにする */
.icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.contact-form-button {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: #95D469;
    color: #fff;
    border-radius: 25px;
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms linear;
}
.contact-form-button:hover { color: #fff; background-color: #638D46; }
#contact table,
#contact table th,
#contact table td { border-color: #D9EEFD; }
#contact th { font-weight: 100; color: #fff; background-color: #140F4B; }
#contact tr { background-color: #ffffff; }
#contact th, #contact td { padding: 10px 20px; }
#contact textarea { height: 300px; resize: vertical; }
#contact input[type="submit"] {
	background-color: #D9EEFD;
	color: #140F4B;
	border-color: #140F4B;
	border-radius: 50px;
	transition: background-color 200ms linear, color 200ms linear;
	font-size: 18px;
}
#contact input[type="submit"]:hover { color: #fff; background-color: #140F4B; }
#contact input[type="button"] {
	width: 100%;
	font-size: 18px;
	border-radius: 50px;
	padding: 10px 20px;
	border-width: 1px;
	cursor: pointer;
	margin-bottom: 10px;
}
.err { color: #AB0000; font-weight: 400; }


/************************************
** お知らせ一覧設定
************************************/
.entry-card-content { margin-left: auto; margin-right: auto; width: 100%; }
.entry-card-title { font-size: 30px; font-weight: 100; color: #23256E; border-bottom: 1px #23256E solid; }
.entry-card-snippet { margin: 20px 0px; font-size: 16px; }
.pagination-next-link { border-color: #23256E; color: #23256E; border-radius: 10px; }
.page-numbers { border-color: #23256E; background-color: #ffffff; color: #23256E; }
.pagination .current { background-color: #23256E; color: #ffffff; }


.mobile-footer-menu-buttons { display: none; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1199px){
   .mobile-menu-button {
        display: inline-block;
	   margin-top: 0px;
	   top: 20px;
    }
	#navi { display: none; top: 80px; left: 0px; right: auto; width: 100%; }
	.navi-in > ul li { margin-left: 0px; padding: 10px; width: 100%; border-bottom: 1px #07328F solid; text-align: left; background-color: #D9EEFD; }
	.navi-in > ul li:first-child { border-top: 1px #07328F solid; }
	#navi ul li .item-label { color: #07328F; }
    .bunner-item {
        margin: 0px 0px 20px 0px;
        width: 100%;
        text-align: center;
    }
	.navi-in a::after {
		content: "";
		display: none;
		width: 0%;
		height: 1px;
		background-color: none;
		left: 100%;
		margin-left: -50%;
		position: absolute;
		transition: all 0.3s ease-in-out;
	}
	.navi-in a:hover {
		background-color: transparent;
		transition: none;
		color: #fff;
	}
	.navi-in a:hover::after {
		width: 100%;
		margin-left: -100%;
	}
	#header-container-in { padding: 0px; }
	#header-container-in.other-page  #header-in.wrap { display: block; text-align: left; padding: 10px 20px; }
	#header { width: 100%; height: 100%; position: relative; top: auto; left: auto; margin: 0px; }
	#header-container-in.other-page #header { width: 100%; }
	.header-in { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
	#header-container-in.other-page .mobile-menu-button { top: 50%; margin-top: -30px; right: 20px; width: 40px; height: 40px; }
    .main.no-home { margin: 0px; padding: 0px 20px; }
    .center-1200 { width: 100%; min-width: auto; }
	#top-message { display: none; }
    #content-in.wrap { width: 100%; }
	#welcome p { width: 100%; padding: 0px 30px; }
	#top-aside-box { flex-wrap: wrap; }
	#top-aside .aside-box { margin-bottom: 60px; }
    #footer-left { float: none; width: 100%; text-align: center; }
    #footer-right { float: none; width: 100%; text-align: center; margin-top: 30px; }
    #breadcrumb.wrap { width: 100%; }
     /************************************
    ** ページ（サイドバー有）
    ************************************/
    .main[data-class="double"] { margin: 0px; padding: 0px 20px; display: flex; flex-wrap: wrap-reverse;  flex-direction: row-reverse; }
    article[data-class="double"] { width: 100%; }
    #side-menu a { width: 100%; }
    /************************************
    ** サイドバー
    ************************************/
    #original-sidebar { width: 100%; }
    .staff-card { flex-wrap: wrap; justify-content: space-around; }
}
/*1130px以下*/
@media screen and (max-width: 1130px){
    .aside-item { height: auto; padding: 0px 10px;}
    .top-aside-mini { display: block; }
    #top-aside-item-01 { background-image: none; border-radius: 0px; }
    #top-aside-item-02 { background-image: none; border-radius: 0px; }
    .aside-contents { margin: 0px; padding: 40px; width: 100%; }
    #top-aside-item-02 .aside-contents a { left: auto; right: 35px; }
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
    #header-container-in { width: 100%; }
    
    main.main { margin: 0px; }
    
    #top-news { padding-left: 20px; padding-right: 20px; }
    #top-news-box { width: 100%; padding: 50px 20px; }
    #top-news .news-left { width: 100%; padding: 0px; }
    #top-news .news-center { display: none; }
    #top-news .news-right { width: 100%; }
    #top-news h1 { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px #23256E solid; }
    #top-news ul { padding-left: 0px; }
    #top-news ul li { padding-bottom: 20px; border-bottom: 1px #D9EEFD solid; }
    
    .howto-list { flex-wrap: wrap; }
    .howto-list dt, .howto-list dd { width: 100%; }
    .howto-list dt { margin-bottom: 20px; }
	#staff li { flex-direction: column-reverse; flex-wrap: wrap; }
	#staff .staff-info { width: 100%; margin-left: 0px; }
	#staff .staff-face { width: 150px; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
    main.main { padding: 0px; }
    .bunner-item img { width: 80%; }
    #footer-in.wrap { padding: 45px 0px 0px; }
    .navi-footer-in > .menu-footer li:last-child { border-right: none; }
    .navi-footer-in > .menu-footer li.menu-item a { padding: 10px; }
    #top-news dl { display: block; }
    #top-news dt, #top-news dd { width: 100%; }
    .copyright { text-align: center; }
    #footer-sns { margin-top: 30px; height: auto; text-align: center; }
    .footer-sns-item { position: relative; }
    #footer-sns img { width: 50px; }
	iframe { width: 100%; }
    .clip-image-center {
        left: -50%;
        width: 100%;
    }
    .clip-image-left, .clip-image-right { width: 0px; }
	.service-dl {
		display: block;
		width: 100%;
		justify-content: flex-start;
	}
	.service-dl dt { font-weight: bold; width: 100%; color: #23256E; border-left: 20px #23256E solid; padding-left: 10px; }
	.service-dl dt::after { content: ""; }
	.service-dl dd { margin-left: 0px;}
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    #header { width: 100%; }
    .site-name img { width: 80%; }
    .narrow_off { display: none; }
    .narrow_on { display: inline; }
	#top-aside .aside-box { width: 100%; padding: 0px 10px; }
	#top-aside .aside-image { width: 100%; text-align: center; }
	#top-aside .aside-image img { max-width: none; width: auto; height: 100%; }
	.staff-rubi { display: block; }
	.right-img { float: none; margin: 0px 0px 10px; padding: 0px;  width: 100%; height: auto; background-color: transparent; }
	.right-img img { width: 100%; }
	.service-step-pc { display: none; }
	.service-step-sp { display: block; }
}