@import url("//share.cr-cms.net/hp_agency/hpagency.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');/*-- google マテリアルアイコン --*/
@import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");
/*---------------------------
テンプレート
フラット01ピンク 右メイン
----------------------------*/

.pc{display:inline;}
.sp{display:none;}

.ta_c{text-align:center !important;}
.ta_r{text-align:right !important;}
.ta_l{text-align:left !important;}

.mb0{margin-bottom: 0px !important;}
.pb0{padding-bottom: 0px !important;}
.m_auto{margin-left: auto; margin-right: auto;}

/*-------------------------------------
全体
---------------------------------------*/

:root {
    --first-color: #fd3d75;
    --second-color: #f08798;
    --third-color: #273866;
    --fourth-color: #f9f7ef;
    --a-1: #47bbc5;
    --a-2: #fff5a0;
    --text: #222222;
    --bg-1: #fceaf0;
    --bg-2: #f4f3ed;
    --bg-pink: #ffb6c9;
  	--font-S:/* clamp(0.875rem, 0.818rem + 0.242vw, 1rem); */ 16px;
 	--font-M:/* clamp(1rem, 0.886rem + 0.485vw, 1.25rem); */ 18px;
  	--font-ML:/* clamp(1.125rem, 1.000rem + 0.533vw, 1.4rem); */ 20px;
	--font-L:/* clamp(1.25rem, 1.136rem + 0.485vw, 1.5rem); */ 22px;
 	--font-LL:/* clamp(1.5rem, 1.159rem + 1.455vw, 2.25rem);*/ 24px;
 	--font-XL:/* clamp(2rem, 1.773rem + 0.97vw, 2.5rem); */ 32px;
}

html {
	scroll-behavior: smooth;
    transition: 0.5s all;
}

body {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: var(--font-M);
	color: var(--text);
	letter-spacing: 0.5px;
	line-height: 1.8;
    counter-reset: number 0;
}
a{
  color: var(--first-color);
  transition: 0.3s all;
}
a:hover {
  color: var(--a-1);
}
.article p {
    line-height: 2em;
    letter-spacing: 0.08em;
}
/*------------------
レイアウト
---------------------*/
#wrap {
	min-width: 1200px;
  	background: white;
}

#wrap_body {
    display: flex;
    flex-direction: column;
    padding: 24px 0 0 0;
}

#title {
    order: 1;
}

#topMenu {
    position: static;
    order: 2;
}

#mainImage {
    order: 3;
}

#contents {
    order: 4;
}

#footer {
    order: 5;
}

#title, #topMenu .topMenu, #topMenu_outer, #contents, #footer_outer {
    width: 1200px;
    max-width: unset;
}
#topMenu, #sideMobile, .footer .services {
 	background-color: var(--first-color);
}

#contents_body {
    display: flex;
    justify-content: space-between;
}

#mainContents {
    float: none;
    width: 850px;
    order: 2;
}

#sideContents {
    float: none;
    width: 286px;
  	margin-top: 0;
    order: 1;
}

#mainArticles {
    width: 100%;
}

.mainArticles .article, .mainArticles div.gallery, #mainTopics, #listTopics, .full {
    width: 100%;
}
.mainArticles .article .image {
 	max-width: 100%; 
}
.mainImage img, #topMenu .topMenu {
    max-width: 100%;
}
.mainArticles .article.full img {
    max-width: 100%;
}
#mainImage {
    width: 100%;
}
#mainArticles_body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.mainArticles .article.mb0, .mainArticles div.gallery.mb0 {
	margin-bottom: 0;
}
.mainArticles .article.bg {
  	background-color: var(--bg-pink);
    padding: 8px 8px 16px;
    border-radius: 16px;
}
.mainArticles .article.bg2 {
  	background-color: var(--bg-2);
    padding: 20px 24px;
    border-radius: 16px;
}
.mainContents .article.ta_center {
    text-align: center;
}
/* header */
#title_outer h1 {
    text-indent: -9999px;
}
#title_outer p.description {
    text-indent: -9999px;
}
#title h1 {
    background: url(/materials/175283073305201.png) no-repeat top 16px left;
    margin: 0;
    padding: 0;
    text-align: left;
    height: 88px;
    background-size: 384px auto;
}
#title_outer {
    height: auto;
    width: 100%;
    margin: auto;
    background: url(/materials/175283073305302.png) no-repeat right;
    background-size: 800px auto;
}
#title_outer h1 {
    text-indent: 0;
}
#title h1 a {
    display: inline-block;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    height: 100%;
    width: 100%;
}
#title h1:hover {
  opacity: 0.7;
}
#title {
    padding: 0;
}

/* header menu */
#topMenu .topMenu li {
    width: calc(100% / 5);
}
#topMenu .topMenu li a {
 	font-size: var(--font-M); 
}
#topMenu .topMenu li a, .footer .services li a {
    color: white;
}
#topMenu .topMenu li a:hover, .footer .services li a:hover {
  	color: #ffdee2;
}
/* 見出し */
.mainContents .article h3,  .mainContents div.gallery h3 {
    font-size: var(--font-LL);
    border-bottom: 4px dotted var(--first-color);
    color: var(--text);
  	margin: 0 auto 32px;
}

#mainArticles h2, #mainServices h2, #mainTopics h2, #listTopics h2 {
    border: none;
    color: var(--text);
  	margin: 0 auto 32px;
    font-size: var(--font-XL);
}
#mainArticles h2::after, #mainServices h2::after, #mainTopics h2::after, #listTopics h2::after {
	content: "";
    width: 150px;
    height: 55px;
    background: url(/materials/175265185322601.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
}
.mainArticles .article h4 {
    color: var(--first-color);
    font-weight: 500;
    margin: 16px 0 4px;
  	font-size: var(--font-L);
  	font-weight: bold;
}
.mainArticles .article h5 {
    font-size: var(--font-M);
    color: var(--first-color);
}
/* ギャラリー */
/* リスト */
ol,ul {
    color: var(--third-color);
}
ul.list1 {
    margin: 8px 0;
    padding: 16px;
    border-radius: 8px;
    letter-spacing: 0.1em;
    background-color: var(--bg-2);
    font-weight: bold;
}
ul.list1 li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: var(--a-1);
    margin-right: 0.3em;
}
ul.list2 {
	display: flex;
    justify-content: space-around;
    background-color: var(--bg-1);
    padding: 16px 24px;
    border-radius: 8px;
  	border: 2px solid var(--bg-pink);
}

ul.list2 li::before {
    content: "\f5c9";
    font-weight: bold;
    font-family: "Font Awesome 5 Free";
    color: var(--first-color);
    margin-right: 0.5em;
  	font-size: var(--font-L);
}
ul.list2 li a {
    text-decoration: none;
  	font-size: var(--font-L);
  	font-weight: bold;
  	color: var(--text);
}
ul.list2 li a:hover {
  color: var(--a-1);
}
/* 番号リスト */
ol.list2 {
    line-height: 3em;
  	padding-left: 11px;
}
ol.list2 li {
    position:  relative;
    padding-left: 24px;
}

ol.list2 li::before {
    content: counter(number) " ";
    counter-increment: number 1;
    border-radius: 50%;
    left: -11px;
    width: 25px;
    height: 25px;
    line-height: 22px;
    text-align: center;
    top: 24px;
    transform: translateY(-50%);
    position: absolute;
    display: inline-block;
	background: var(--a-1);
    color: white;
    font-weight: bold;
    font-size: 18px;
}
ol.list2 li p {
    border-bottom:  2px dotted white;
    line-height: 2.5;
  	font-weight: bold;
  	margin-bottom: 8px;
}
ol.list2 li img {
    margin: 16px auto 0;
    display: block;
}
/* Table */
.article table.timeTbl {
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 8px !important;
  	margin-top: 24px;
}
.article table.timeTbl thead th {
    background: var(--first-color);
    padding: 10px;
    color: #fff;
}
.article table.timeTbl tbody th, .article table.timeTbl td {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid var(--first-color);
}
.article table.timeTbl tbody tr:last-child td:last-child {
    border-radius: 0 0 8px 0;
}
.article table.timeTbl thead th:first-child {
    border-radius: 8px 0 0 0;
}
.article table.timeTbl thead th:last-child {
    border-radius: 0 8px 0 0;
}
.article table.timeTbl tbody tr:last-child th {
    border-radius: 0 0 0 8px;
}
.article table.timeTbl tbody th {
	border-left: 1px solid var(--first-color);
}
.article table.timeTbl tbody td:last-child {
	border-right: 1px solid var(--first-color);
}
.mainTopics .topics li a {
  	color: var(--first-color);
  	font-size: var(--font-M);
}
.mainTopics .topics li a:hover, .mainTopics .topics li .more a:hover {
	color: var(--a-1);
  	text-decoration: none;
}
.mainTopics .topics li h3 a {
    font-size: var(--font-M);
}
/* 装飾 */
h5.train::before, h5.bus::before, h5.car::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    display: inline-block;
    font-size: 20px;
    margin-right:0.5em;
}
h5.train::before {
    content: "\f238";
}
h5.bus::before {
    content: "\f207";
}
h5.car::before {
    content: "\f1b9";
}

/*Side自由*/
.side_about {
    text-align: center;
    background-color: var(--bg-1);
    padding: 26px 30px;
    border-radius:  8px;
    margin-bottom: 24px;
  	border: 2px solid var(--bg-pink);
}

.side_about p {
    margin-bottom:  8px;
}

.side_about p strong {
    color: var(--first-color);
}
.side_about img {
    width: 100%;
    margin-bottom:  16px;
}
/* Side Menu */
#sideServices, #sideMobile {
    width: 100%;
    margin-top: 24px;
}
.sideServices h2 {
    background: none;
    background-color: var(--bg-pink);
    font-size: var(--font-M);
    border-radius: 8px 8px 0 0;
    text-align: center;
}
.sideServices ul {
	width: auto;
    background-color: var(--bg-1);
    border-radius: 0 0 8px 8px;
    border: 2px solid var(--bg-pink);
}
.sideServices ul li a {
    font-size: var(--font-M);
}
.sideServices ul li a:hover {
    text-decoration: none;
    color: var(--first-color);
}
/* 新着情報 */
.contents #mainTopics .listview a {
    padding-left: 24px;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: var(--a-1);
  	background: none;
    background-color: white;
    border: 2px solid var(--a-1);
    font-size: var(--font-M);
    padding: 8px 24px;
    border-radius: 999px;
    display: block;
    text-align: center;
    max-width: 240px;
    width: auto;
    margin: 0 auto;
}
#mainTopics .listview a:hover {
    text-decoration: none;
    background: var(--a-1);
    color: white;
}
#mainTopics .topics li .date {
    font-size: 13px;
    margin: 2px 0 4px;
}
#listTopics .mainTopics .topics li, #mainTopics .mainTopics .topics li {
    margin-bottom: 30px;
}
#listTopics .mainTopics .topics li {
    border-radius: 8px;
    background: var(--bg-2);
    border-bottom: none;
    padding: 24px;
}
.mainTopics .topics li .date {
 	font-size: 13px; 
}
#mainTopics .topics .description, .mainTopics .topics li .description {
 	font-size: var(--font-S); 
}
.mainArticles h3 a {
    text-decoration: none;
}
/* Footer */
#footer {
    background: url(bg_footer.gif) bottom repeat-x;
    background-color: var(--first-color);
}
.footer * {
    font-size: var(--font-M);
}
.footer .topMenu {
    width: auto;
    height: auto !important;
    padding: 45px 0;
    display: flex;
    justify-content: space-around;
    font-size: var(--font-M);
  	float: none;
}
.footer li {
    width: auto;
  	line-height: auto;
    height: 0;
}
.footer li a {
    text-decoration: none;
    display: block;
    color: white;
}
.footer a:hover, .footer p a:hover {
    color: var(--bg-pink);
}
.footer .copyright {
    padding: 48px 0 5px 0;
}
p.copyright {
    color: white;
}
p.copyright a {
    color: white;
    font-size: var(--font-S);
}
/* Footer Side Menu */
.footer .services {
    width: auto;
    padding: 45px 0;
    display: flex;
    float: none;
    justify-content: space-around;
    font-size: var(--font-S);
    align-items: center;
}
.footer .services li a {
    font-size: var(--font-S);
}
.footer ul:after {
 	content: none; 
}

/* 404 */
.article.no-page p a {
    text-decoration:  none;
    text-align: center;
    display: block;
    background: var(--a-1);
    color: white;
    width: auto;
    max-width: 288px;
    margin: 16px auto 0;
    padding: 8px 16px;
    border-radius:  999px;
    border: 2px solid var(--a-1);
}
.article.no-page p a:hover {
    background: white;
    border: 2px solid var(--a-1);
    color: var(--a-1);
}

.freeHtml #contact-box {
    position: fixed;
    top: 86px;
    right: 0px;
    z-index: 100;
    width: 50px;
}