@charset "utf-8";
/*
Theme Name: mitama
Auther:shimabase
Description:美珠丸オリジナルテーマ
Version:1.0
*/

@charset "UTF-8";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img,
object,
embed,
video {
  max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
  width: 100%;
}

html {
  font-size: 10px;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #fff;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover,
a:visited {
  color: #ffffff;
}

p {
  margin: 0;
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1;
}

.full-screen {
  width: 100%;
}

.gridContainer01 {
  width: 85%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}

.gridContainer02 {
  width: 85%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}

.gridContainer03 {
  width: 85%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}

.footerContainer {
  width: 90%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}

.anchor {
  margin-top: -70px;
  padding-top: 70px;
}

.pc-mode {
  display: none;
}

.sp-mode {
  display: block;
}

.pc-inline {
  display: none;
}

.pos {
  position: relative;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.left-center {
  text-align: left;
}

.center-left {
  text-align: center;
}

.center-right {
  text-align: center;
}

.middle {
  vertical-align: middle;
}

.img-100 {
  display: block;
  width: 100%;
}

.img-70-90 {
  display: block;
  width: 70%;
  margin: 0 auto;
}

.img-80 {
  display: block;
  width: 80%;
  margin: 0 auto;
}

.img-70-100 {
  display: block;
  width: 70%;
  margin: 0 auto;
}

.img-80-100 {
  display: block;
  width: 80%;
  margin: 0 auto;
}

.img-90-100 {
  display: block;
  width: 90%;
  margin: 0 auto;
}

.img-100-70 {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/*  font
---------------------------------------*/
/*源ノ角ゴシック Rgl*/
.gen-r,
.gen-r th,
.gen-r td {
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*DNP 秀英丸ゴシック Std B*/
.shuei-b {
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 600;
  font-style: normal;
}

/*DNP 秀英丸ゴシック Std L*/
.shuei-l {
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*A-OTF UD新ゴ Pr6N L*/
/* .ud-shin-go {
  font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
} */

/*DNP 秀英角ゴシック金 Std L*/
/* .shuei-kin {
  font-family: dnp-shuei-gothic-kin-std, sans-serif;
  font-weight: 400;
  font-style: normal;
} */

/*A-OTF 見出ゴMB31 Pr6N MB31*/
.midashi-go {
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-weight: 600;
  font-style: normal;
}

/*FOT-筑紫B丸ゴシック Std R*/
.tsukushi {
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*  font color
---------------------------------------*/
.color-black01,
a.color-black01:hover,
a.color-black01:visited {
  color: #333333;
}

.color-black03 {
  color: #000000;
}

.color-gray01 {
  color: #666666;
}

.color-blue01,
a.color-blue01:hover,
a.color-blue01:visited {
  color: #3366ff;
}

.color-white {
  color: #FFFFFF;
}

.color-red01 {
  color: #e82327;
}

/*  bg
---------------------------------------*/
.bg-white {
  background-color: #ffffff;
}

.bg-blue01 {
  background-color: #3366ff;
}

.bg-gray03 {
  background-color: #f7f8f8;
}

/*  border
---------------------------------------*/
.border-blue01 {
  border: 1px solid #3366cc;
}

/*  改行
---------------------------------------*/
.br-ip::before {
  content: "\A";
  white-space: pre;
}

.br-sp::before {
  content: "\A";
  white-space: pre;
}

.br-sp-space::before {
  content: "\A　";
  white-space: pre;
}

.br-tab::before {
  content: "";
}

.br-ip-tab::before {
  content: "\A";
  white-space: pre;
}

/*  スペース
---------------------------------------*/
.top08 {
  padding-top: 0.4rem;
}

.top10 {
  padding-top: 0.5rem;
}

.top15 {
  padding-top: 0.75rem;
}

.top20,
.top20-sp {
  padding-top: 1rem;
}

.top25 {
  padding-top: 1.25rem;
}

.top30,
.top30-sp {
  padding-top: 1.5rem;
}

.top35 {
  padding-top: 1.75rem;
}

.top40,
.top40-sp {
  padding-top: 2rem;
}

.top45 {
  padding-top: 2.25rem;
}

.top50,
.top50-sp {
  padding-top: 2.5rem;
}

.top55 {
  padding-top: 2.75rem;
}

.top60,
.top60-sp {
  padding-top: 3rem;
}

.mtop60 {
  margin-top: 3rem;
}

.top65 {
  padding-top: 3.25rem;
}

.top70 {
  padding-top: 3.5rem;
}

.top75 {
  padding-top: 3.75rem;
}

.top80 {
  padding-top: 4rem;
}

.top85 {
  padding-top: 4.25rem;
}

.top90 {
  padding-top: 4.5rem;
}

.top95 {
  padding-top: 4.75rem;
}

.top100 {
  padding-top: 5rem;
}

.top110 {
  padding-top: 5.5rem;
}

.top115 {
  padding-top: 5.75rem;
}

.top120 {
  padding-top: 6rem;
}

.top130 {
  padding-top: 6.5rem;
}

.top140 {
  padding-top: 7rem;
}

.bottom15 {
  padding-bottom: 0.75rem;
}

.bottom20 {
  padding-bottom: 1rem;
}

.bottom30 {
  padding-bottom: 1.5rem;
}

.bottom35 {
  padding-bottom: 1.75rem;
}

.bottom40 {
  padding-bottom: 2rem;
}

.bottom45 {
  padding-bottom: 2.25rem;
}

.bottom55 {
  padding-bottom: 2.75rem;
}

.bottom60 {
  padding-bottom: 3rem;
}

.bottom70 {
  padding-bottom: 3.5rem;
}

.bottom75 {
  padding-bottom: 3.75rem;
}

.bottom80 {
  padding-bottom: 4rem;
}

.bottom90 {
  padding-bottom: 4.5rem;
}

.bottom100 {
  padding-bottom: 5rem;
}

.bottom105 {
  padding-bottom: 5.25rem;
}

.bottom110 {
  padding-bottom: 5.5rem;
}

.bottom120 {
  padding-bottom: 6rem;
}

.bottom125 {
  padding-bottom: 6.25rem;
}

.bottom130 {
  padding-bottom: 6.5rem;
}

.bottom135 {
  padding-bottom: 6.75rem;
}

.bottom140 {
  padding-bottom: 7rem;
}

.bottom150 {
  padding-bottom: 7.5rem;
}

.bottom155 {
  padding-bottom: 7.75rem;
}

.pagetop-space {
  padding-top: 5rem;
}

/*  行間,文字間
---------------------------------------*/
.line01 {
  line-height: 1;
}

.line02 {
  line-height: 2;
}

.line01_2 {
  line-height: 1.2;
}

.line01_4 {
  line-height: 1.4;
}

.line01_6 {
  line-height: 1.6;
}

.line01_8 {
  line-height: 1.8;
}

.line02_2 {
  line-height: 1.8;
}

.line02_4 {
  line-height: 2;
}

.line02_8 {
  line-height: 2.8;
}

.line03_2 {
  line-height: 2.8;
}

.line03_6 {
  line-height: 3.6;
}

.line01_4-sp {
  line-height: 1.4;
}

.line01_6-sp {
  line-height: 1.6;
}

.line02-sp {
  line-height: 2;
}

.line-deduction {
  line-height: 1.4;
}

.text-space20 {
  letter-spacing: 0.005em;
}

.text-space30 {
  letter-spacing: 0.01em;
}

.text-space40 {
  letter-spacing: 0.015em;
}

.text-space50 {
  letter-spacing: 0.02em;
}

.text-space100 {
  letter-spacing: 0.04em;
}

.text-space110 {
  letter-spacing: 0.048em;
}

.text-space130 {
  letter-spacing: 0.08em;
}

.text-space130 {
  letter-spacing: 0.064em;
}

.text-space150 {
  letter-spacing: 0.08em;
}

.text-space160 {
  letter-spacing: 0.042em;
}

.text-space170 {
  letter-spacing: 0.045em;
}

.text-space300 {
  letter-spacing: 0.075em;
}

.text-kerning,
.text-kerning-sp {
  font-feature-settings: "palt";
}

.text-space-minus {
  letter-spacing: -1px;
}

/*  button
---------------------------------------*/
.round-05 {
  border-radius: 0.25rem;
}

.round-10 {
  border-radius: 0.5rem;
}

.round-20 {
  border-radius: 1rem;
}

.round-30 {
  border-radius: 1.5rem;
}

.round-40 {
  border-radius: 2rem;
}

.round-50 {
  border-radius: 5rem;
}

.round-circle {
  border-radius: 50%;
}

.square-tel {
  display: block;
  width: 4rem;
  height: 4rem;
  padding: 0.5rem 0.1rem;
}





.button-arrow01 {
  display: block;
  width: 1.1em;
}

.button-arrow02 {
  display: block;
  width: 1.3em;
  margin-right: 0.2em;
}

.button-common {
  display: block;
  margin: 0 auto;
  width: 100%;
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.15);
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.button-common:hover {
  box-shadow: none;
  transform: translate3d(0, 5px, 0);
}

a.button-column {
  padding: 1.4rem 1rem;
}

.button-common01 {
  padding: 2em 1.2em;
}

.button-common02 {
  padding: 2em 0.5em;
}

.button-common03 {
  margin: 0;
  padding: 0.8em 0.5em;
}

.button-footer {
  padding: 1.7em 2em;
}

a.button-guide {
  padding: 1.7em 0.5em;
}

.button-index {
  margin: 0;
  overflow: hidden;
}

.button-arrow03 {
  display: block;
  width: 1.1em;
  transform: rotate(90deg);
}

.button-text01 {
  font-size: 1.4rem;
}

.button-text02 {
  font-size: 1.35rem;
}

.border-button {
  text-decoration: underline;
}

.button-nomal,
.button-narrow,
.button-narrow02,
.button-column-80 {
  width: 100%;
  margin: 0 auto;
}

div.button-guide {
  width: 100%;
  margin: 0 auto;
}

.button-features {
  padding: 0 0 1.5em 0;
}

.button-center {
  margin: 0 auto;
}

.button-right {
  margin-left: auto;
  margin-right: 0;
}

.button-white,
.button-white:visited {
  background-color: inherit;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.button-white:hover {
  background-color: #ffffff;
  color: #b49f60;
}

.button-blue01,
.button-blue01:visited {
  background-color: inherit;
  border: 2px solid #100964;
  color: #100964;
}

.button-blue01:hover {
  background-color: #100964;
  color: #ffffff;
}

.button-medical {
  background-color: #100964;
  border: 2px solid #ffffff;
  color: #ffffff;
  margin: 0 auto 1.5em auto;
}

.button-medical:hover,
.button-medical:focus,
.button-medical:active {
  background-color: #ffffff !important;
  color: #100964 !important;
}

.button-medical:visited {
  color: #ffffff;
}

.title-color {
  width: 100%;
  padding: 1em;
}

.upper {
  z-index: 990;
}

.upper02 {
  z-index: 999;
}

.button-hover:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

/*  flexbox
---------------------------------------*/
.flex-item-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-column,
.flex-column-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-justify-around,
.flex-justify-around-between {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flex-justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex-justify-center,
.flex-justify-center-start {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-justify-start-center {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.flex-justify-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.flex-align-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-align-strech {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.flex-align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-align-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.flex-align-start-strech,
.flex-align-start-center {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-bottom {
  margin-top: auto;
}

/*box*/
.box03>a,
.box03>li,
.box03>div,
.box02>div {
  display: block;
  width: 100%;
}

/*  list
---------------------------------------*/
.asterisk-list li,
.circle-list li,
.check-list li {
  position: relative;
  padding: 0;
  vertical-align: middle;
  line-height: 2;
  text-indent: -1.2em;
  padding-left: 1.2em;
}

.circle-list02 li {
  position: relative;
  padding: 0;
  vertical-align: middle;
  line-height: 2;
  text-indent: -1em;
  padding-left: 1em;
}

.check-list02 li {
  position: relative;
  padding: 0;
  vertical-align: middle;
  line-height: 2;
  text-indent: -1.6em;
  padding-left: 1.6em;
}

.check-list img,
.check-list02 img {
  width: 1.2em;
  margin-right: 0.5em;
}

.merit-list {
  height: 4em;
  width: 100%;
  margin-top: 0.7rem;
}

.demerit-list {
  height: 5em;
  width: 100%;
  margin-top: 0.7rem;
}

.merit-list02 {
  margin-top: 0.7rem;
}

.meri-text {
  height: 6em;
}

.merit-list li,
.demerit-list li {
  position: relative;
  padding: 0;
  vertical-align: middle;
  line-height: 1.6;
  text-indent: -1.8em;
  padding-left: 1.8em;
}

.merit-list img,
.demerit-list img {
  width: 1.6em;
  margin-right: 0.3em;
  margin-bottom: 0.2em;
}

.merit-list02 li {
  position: relative;
  padding: 0;
  vertical-align: middle;
  line-height: 2;
  text-indent: -2em;
  padding-left: 2em;
}

.merit-list02 img {
  width: 1.6em;
  margin-right: 0.6em;
  margin-bottom: 0.2em;
}

/*  drawer
---------------------------------------*/
.drawer-navbar {
  z-index: 9999 !important;
}

.drawer-nav {
  background-color: #3366cc !important;
  opacity: 0.8;
  margin-top: 70px !important;
}

.drawer-nav a {
  color: #ffffff !important;
  letter-spacing: -1px !important;
}

.drawer-dropdown-menu {
  background-color: rgba(170, 224, 249, 0.8) !important;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  background-color: #ffffff !important;
}

.drawer-open .drawer-hamburger-icon {
  background-color: #3366cc !important;
}

.drawer-open .menu-title::before {
  font-size: 10px;
  content: '閉じる';
}

.drawer-open .menu-title {
  font-size: 0;
}

.drawer-hamburger {
  top: 6px !important;
  right: 12px !important;
  width: 34px !important;
  padding-bottom: 40px !important;
}

.drawer-menu li a {
  font-size: 1.4rem;
}

.drawer-dropdown-menu {
  font-size: 12px;
}


.drawer-medical {
  padding: 11px 0 !important;
}

.drawer-dropdown-menu-item {
  line-height: 1.4 !important;
}

/*  hedaer
---------------------------------------*/
.sp-header {
  background-color: #ffffff;
  height: 70px;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.sp-home {
  position: fixed;
  top: 2.5px;
  left: 2%;
  display: inline-block;
  height: 60px;
  width: 52%;
}

.sp-tel {
  width: 70px;
  height: 70px;
  position: fixed;
  top: 0;
  right: 70px;
  display: block;
  background-color: #999999;
}

.sp-tel img {
  width: 35%;
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.sp-tel p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 10px;
}

.bg-sp p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 10px;
}

.bg-sp {
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  box-sizing: content-box;
  width: 70px;
  height: 70px;
  padding: 0;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  border: 0;
  outline: 0;
  background-color: #3366cc;
}

#header {
  margin-top: 70px;
  z-index: 99;
}

.header-logo {
  display: block;
  width: 45%;
}

.header-tel-title {
  font-size: 11px;
}

.header-tel-icon {
  display: block;
  width: 1.3em;
  margin: 0 auto;
  padding-bottom: 0.2rem;
}

a.header-tel:hover,
a.header-tel:visited {
  color: #ffffff;
}

/* header slider */
.header-img-pc {
  display: none;
}

.header-img-sp {
  display: block;
  width: 100%;
}

/* swiper */
.swiper-wrapper {
  height: auto;
}

/* breadcrumb */
.breadcrumb span {
  font-size: 10px;
}

.breadcrumb {
  padding-left: 0;
  margin-left: 0;
  text-align: left;
  margin-top: 2rem;
}

.bread-bottom {
  padding-bottom: 0;
}

.breadcrumb li {
  display: inline;
  list-style: none;
  font-weight: bold;
}

.breadcrumb li:after {
  content: '>';
  padding: 0 3px;
  color: #999999;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
}

/*  footer
---------------------------------------*/
/*logo*/
.footer-logo {
  display: block;
  width: 60%;
  margin: 0 auto 1rem auto;
}

.footer-text01 {
  font-size: 1.4rem;
}

.footer-text02 {
  font-size: 2.4rem;
  display: block;
}

.footer-text02 span {
  font-size: 1em;
  vertical-align: middle;
}

/*copyright*/
.copy-text {
  font-size: 0.9rem;
  padding: 1em 0 2em 0;
}

/*  Content
---------------------------------------*/
.block-title01 {
  font-size: 2.2rem;
}

h3.block-title01 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}

h3.block-title01:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.8rem;
  /*線の上下位置*/
  display: inline-block;
  width: 1.5em;
  height: 4px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #3366ff;
}

.item-title01 {
  font-size: 1.8rem;
}

.item-title02 {
  font-size: 1.7rem;
}

.item-title03 {
  font-size: 1.75rem;
}

.item-title04 {
  font-size: 2rem;
}

.item-title05 {
  font-size: 1.5rem;
}

.item-title06 {
  font-size: 1.4rem;
}

.item-title07 {
  font-size: 1.55rem;
}

.item-text01 {
  font-size: 1.4rem;
}

.item-text02 {
  font-size: 1.35rem;
}

.item-text03 {
  font-size: 1.4rem;
}

.item-text04 {
  font-size: 1.1rem;
}

.cost-table01,
.cost-table01 tr,
.cost-table02,
.cost-table02 tr {
  width: 100%;
}

/*料金表*/
.cost-table01 th {
  width: 50%;
  padding: 1.2rem 0 1.2rem 1rem;
}

.cost-table01 td {
  width: 50%;
  padding: 1.2rem 1rem 1.2rem 0;
}

.cost-table01 td.center {
  padding: 1.2rem 0 1.2rem 0;
}

.cost-table02 th.cost-th01 {
  width: 28%;
}

.cost-table02 th.cost-th02 {
  width: 22%;
}

.cost-table02 th {
  padding: 1.2rem 0 1.2rem 0.8rem;
}

.cost-table02 td {
  width: 50%;
  padding: 1.2rem 0.8rem 1.2rem 0;
}

/* 投稿 */
.post-img img {
  display: block;
  height: auto;
}

/*  1ページ目
---------------------------------------*/
/*news*/
.news-img {
  display: block;
  width: 100%;
  height: 13rem;
  /*任意の高さを指定*/
  object-fit: cover;
}

.news-box a {
  padding-bottom: 2rem;
}

.news-box a:nth-child(4),
.news-box a:nth-child(5),
.news-box a:nth-child(6) {
  display: none;
}

.news-title {
  padding: 0.5em 0;
}

/* レンタルボード */
.rentalboat-space02 {
  padding-left: 6.5em;
}

/*  釣果情報
---------------------------------------*/
.catch-title {
  padding-bottom: 1rem;
}

.catch-box {
  border: 1px solid #3366ff;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.catch-cat {
  padding: 0.5em;
  background-color: #3366ff;
  margin: 0 0.2rem;
}

.cat-box {
  margin-bottom: 0.5rem;
}

/* ページャー */
.mitama-pager ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.mitama-pager ul li {
  padding: 0 0.5em;
}

.mitama-pager ul li a,
.mitama-pager ul li a:visited,
.mitama-pager ul li span {
  font-size: 1.8rem;
  text-decoration: none;
  color: #333333;
  border: 1px solid #3366ff;
  display: inline-block;
  text-align: center;
  padding: 0.5em;
}

.mitama-pager ul li a:hover,
.mitama-pager ul li span.current {
  background-color: #3366ff;
  border: 1px solid #3366ff;
  color: #ffffff;
}

/*  お問い合わせ
---------------------------------------*/
.contact-table,
.contact-table tr {
  width: 100%;
}

.contact-table th,
.contact-table td {
  display: block;
  width: 100%;
  padding: 1em 0.5em;
  border: 1.5px solid rgba(51, 102, 204, 0.5);
  text-align: left;
}

.contact-table td input,
.contact-table td textarea {
  font-size: 1em;
  line-height: 1.4;
  width: 100%;
}

.button-contact {
  text-align: left;
  padding-top: 2rem;
  margin-left: 10%;
}

.button-contact input {
  width: 50%;
  background-color: #3366ff;
  border: 1px solid #3366ff;
  color: #ffffff;
  font-size: 1em;
  letter-spacing: 0.2em;
  transition: 0.3s;
}

.contact input:hover {
  background-color: #ffffff;
  color: #3366ff;
}

/* gallery
---------------------------*/
#cboxClose {
  background: url(../img/99-controls.png) no-repeat !important;
  width: 40px !important;
  height: 40px !important;
  top: -30px !important;
}

#cboxLoadedContent {
  background: #ffffff !important;
}

/* 動き
---------------------------*/
.fade-up {
  transition: 1s;
  opacity: 0;
  transform: translate(0, 50px);
}

.fade-visible {
  transition: 0.8s;
  opacity: 0;
  transform: translate(0, 50px);
}

.fade01 {
  transition-duration: 1s;
  opacity: 0;
  transform: translate(0, 50px);
}

.fade02 {
  transition-duration: 1s;
  transition-delay: 0.3s;
  opacity: 0;
  transform: translate(0, 50px);
}

.fade03 {
  transition-duration: 1s;
  transition-delay: 0.6s;
  opacity: 0;
  transform: translate(0, 50px);
}

.num-arrival {
  transition: 1s;
  opacity: 0;
  transform: translate(0, 0);
}

.isAnimate {
  opacity: 1;
  transform: translate(0, 0);
}

.isAnimate02 {
  opacity: 1;
  transform: scale(1, 1);
}

/*マーカー*/
.marker-pink03 {
  background: -webkit-linear-gradient(left, rgb(250, 237, 240) 50%, transparent 50%);
  background: -moz-linear-gradient(left, rgb(250, 237, 240) 50%, transparent 50%);
  background: linear-gradient(left, rgb(250, 237, 240) 50%, transparent 50%);
}

.marker-white {
  background: -webkit-linear-gradient(left, rgb(255, 255, 255) 50%, transparent 50%);
  background: -moz-linear-gradient(left, rgb(255, 255, 255) 50%, transparent 50%);
  background: linear-gradient(left, rgb(255, 255, 255) 50%, transparent 50%);
}

.marker01 {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 200% 0.8em;
  background-position: 100% 1.1em;
  transition: 2s;
}

.marker02 {
  transition-delay: 2s;
}

.marker01.is-active {
  background-position: 0% 1.1em;
}

/*  googlemap枠
----------------------------------*/
.ggmap {
  margin-top: 3rem;
  position: relative;
  padding-bottom: 60%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*  pagetop設定
----------------------------------*/
.pagetop {
  display: none;
  position: fixed;
  bottom: 5px;
  right: 0;
  width: 50px;
}

.pagetop a {
  display: block;
  text-decoration: none;
}

.pagetop a:hover {
  display: block;
  text-decoration: none;
}

@media only screen and (min-width: 520px) {

  html {
    font-size: 15px;
  }

  .gridContainer01 {
    width: 85%;
  }

  .gridContainer02 {
    width: 85%;
  }

  .gridContainer03 {
    width: 85%;
  }

  .footerContainer {
    width: 85%;
  }

  .anchor {
    margin-top: -85px;
    padding-top: 85px;
  }

  /*  改行
---------------------------------------*/
  .br-ip::before {
    content: "";
  }

  .br-ip-tab::before {
    content: "";
  }

  .br-pc02::before {
    content: "\A";
    white-space: pre;
  }

  /*  flexbox
---------------------------------------*/
  .flex-text02 {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }

  /*  drawer
---------------------------------------*/
  /* .drawer-hamburger {
		width: 35px !important;
		padding: 15px 15px 30px 15px !important;
	}

	.drawer-navbar .drawer-nav {
		margin-top: 85px !important;
	} */

  .drawer-nav {
    margin-top: 85px !important;
  }

  .drawer-hamburger {
    top: 10px !important;
    right: 12px !important;
    width: 42px !important;
  }

  .drawer-open .menu-title::before {
    font-size: 12px;
  }

  /*  hedaer
---------------------------------------*/
  .sp-header {
    height: 85px;
  }

  .sp-home {
    top: 5px;
    left: 2%;
    height: 75px;
    width: 60%;
  }

  .sp-tel {
    width: 85px;
    height: 85px;
    right: 85px;
  }

  .sp-tel img {
    width: 35%;
    top: 15px;
  }

  .sp-tel p {
    font-size: 12px;
  }

  .bg-sp {
    width: 85px;
    height: 85px;
  }

  .bg-sp p {
    font-size: 12px;
  }

  .header-tel-title {
    font-size: 13px;
  }

  /*  Content
---------------------------------------*/
  /*料金表*/
  .cost-table01 th {
    padding: 1.2rem 0 1.2rem 1.5rem;
  }

  .cost-table01 td {
    padding: 1.2rem 1.5rem 1.2rem 0;
  }

  .cost-table02 td {
    padding: 1.2rem 1.5rem 1.2rem 0;
  }


  /*  pagetop設定
----------------------------------*/
  .pagetop {
    bottom: 5px;
    right: 0;
    width: 65px;
  }

}

@media only screen and (min-width: 768px) {

  html {
    font-size: 13px;
  }

  .gridContainer01 {
    width: 90%;
  }

  .gridContainer02 {
    width: 85%;
  }

  .gridContainer03 {
    width: 80%;
  }

  .footerContainer {
    width: 98%;
  }

  .anchor {
    margin-top: -7rem;
    padding-top: 7rem;
  }

  .pc-mode {
    display: block;
  }

  .sp-mode {
    display: none;
  }

  .pc-inline {
    display: inline;
  }

  .left-center {
    text-align: center;
  }

  .center-left {
    text-align: left;
  }

  .center-right {
    text-align: right;
  }

  .img-100-70 {
    width: 70%;
  }

  .img-70-90 {
    width: 90%;
  }

  .img-70-100,
  .img-80-100,
  .img-90-100 {
    width: 100%;
  }

  .text-kerning-sp {
    font-feature-settings: "zero";
  }

  /*  改行
---------------------------------------*/
  .br-sp::before,
  .br-sp-space::before {
    content: "";
  }

  .br-tab::before {
    content: "\A";
    white-space: pre;
  }

  .br-ip-tab::before {
    content: "\A";
    white-space: pre;
  }

  .br-pc::before {
    content: "\A";
    white-space: pre;
  }

  /*  スペース
---------------------------------------*/
  .top20-sp,
  .top30-sp,
  .top40-sp,
  .top50-sp,
  .top60-sp {
    padding-top: 0;
  }

  .pagetop-space {
    padding-top: 2.5rem;
  }

  /*  行間,文字間
---------------------------------------*/
  .line02_2 {
    line-height: 2.2;
  }

  .line02_4 {
    line-height: 2.4;
  }

  .line03_2 {
    line-height: 3.2;
  }

  .line01_4-sp,
  .line01_6-sp,
  .line02-sp,
  .line-deduction {
    line-height: 1;
  }

  /*  button
---------------------------------------*/
  .round-50 {
    border-radius: 2.5rem;
  }

  .square-tel {
    width: 4rem;
    height: 4rem;
  }



  .button-common01 {
    padding: 1.3em 0.8em;
  }

  .button-common02 {
    padding: 1.3em 0.8em;
  }

  .button-footer {
    padding: 1em 0.8em;
  }

  a.button-guide {
    padding: 1em 1.5em;
  }

  a.button-column {
    padding: 1.4rem 1rem;
  }

  .button-text01 {
    font-size: 0.981rem;
  }

  .button-text02 {
    font-size: 0.941rem;
  }

  .button-nomal {
    width: 45%;
  }

  .button-narrow {
    width: 37.5%;
  }

  .button-narrow02 {
    width: 42.5%;
  }

  div.button-guide {
    width: 28em;
  }

  .button-features {
    padding: 0;
  }

  .button-column-80 {
    width: 80%;
  }

  .button-medical {
    margin: 0 1em;
  }

  .title-color {
    padding: 0.7em;
  }

  /*  flexbox
---------------------------------------*/
  .flex-menu {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .flex-column-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .flex-justify-around-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .flex-justify-center-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .flex-justify-start-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-align-start-strech {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .flex-align-start-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .flex-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  /*box*/
  .flex-50-50>div {
    width: 50%;
  }

  .flex-60-40>div:nth-child(1) {
    width: 68%;
  }

  .flex-60-40>div:nth-child(2) {
    width: 32%;
  }

  .flex-40-60>div:nth-child(1) {
    width: 32%;
  }

  .flex-40-60>div:nth-child(2) {
    width: 68%;
  }

  .box03>a,
  .box03>li,
  .box03>div {
    width: 30%;
  }

  .box03::after {
    content: "";
    display: block;
    width: 30%;
    height: 0;
  }

  .box02>div {
    width: 40%;
  }

  /*スペース*/
  .flex-left30 {
    padding-left: 0.5rem;
  }

  .flex-left50 {
    padding-left: 0.83rem;
  }

  .flex-left60 {
    padding-left: 0.995rem;
  }

  .flex-left70 {
    padding-left: 1.16rem;
  }

  .flex-right30 {
    padding-right: 0.5rem;
  }

  .flex-right50 {
    padding-right: 0.83rem;
  }

  .flex-right70 {
    padding-right: 1.16rem;
  }

  .flex-title-right {
    border-left: 4px dotted #100964;
  }

  /*3ページ目*/
  .flex-item-center-sp {
    display: block;
  }

  /*  list
---------------------------------------*/
  .merit-list {
    height: 6em;
  }

  .demerit-list {
    height: 6em;
  }

  .meri-text {
    height: 8em;
  }

  /*  hedaer
---------------------------------------*/
  /*menu*/
  .sp-header {
    display: none;
  }

  .header-logo {
    width: 20%;
  }

  .menu {
    width: 60%;
  }

  .header-logo img {
    display: block;
    width: 100%;
  }

  .header-tel-title {
    font-size: 11px;
  }

  .header-tel-icon {
    width: 1.3em;
    padding-bottom: 0.1rem;
  }

  #header {
    margin-top: 0;
  }

  .pc-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
  }

  .pc-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 1rem 3%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }

  .pc-menu.isfixed {
    padding: 0;
  }

  .pc-menu-inner {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 1em;
    overflow: hidden;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #ffffff;
    position: relative;
    transition: 0.3s;
    padding-right: 2%;
    padding-left: 2%;
  }

  .pc-menu-inner.isopen {
    border-radius: 1em 1em 0 0;
    overflow: inherit;
  }

  .pc-menu.isfixed .pc-menu-inner {
    border-radius: 0 !important;
    max-width: inherit;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .menu>li {
    text-align: center;
  }

  .menu>li a {
    display: block;
    font-size: 10px;
    position: relative;
    padding: 2rem 0;
  }

  .menu>li a:visited {
    color: #666666;
  }

  .menu>li a:hover,
  .menu>li a.thispage {
    color: #3366cc;
  }

  .hasdrop {
    position: relative;
  }

  .navdrop {
    display: none;
    position: absolute;
    top: 62%;
    left: -4.5em;
    background-color: rgba(255, 255, 255, 0.8);
    width: 15em;
    font-size: 10px;
  }

  .navdrop-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .navdrop-inner>ul {
    list-style: none;
    width: 100%;
    padding-left: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .navdrop-inner>ul li {
    width: 100%;
  }

  .navdrop-inner>ul li a {
    display: block;
    font-size: 10px;
    padding: 0.8rem 0;
    margin: 0 auto;
  }

  .navdrop-inner>ul li a:visited {
    color: #666666;
  }

  .navdrop-inner>ul li a:hover,
  .navdrop-inner>ul li a.thispage {
    color: #ffffff;
    background-color: rgba(0, 191, 242, 0.8);
  }

  /* header slider */
  .header-img-pc {
    display: block;
    width: 100%;
  }

  .header-img-sp {
    display: none;
  }

  /* breadcrumb */
  .breadcrumb span {
    font-size: 8px;
  }

  /*  footer
----------------------------------*/
  /*logo*/
  .footer-logo {
    width: 25%;
    margin: 0;
  }

  .footer-text01 {
    font-size: 0.9rem;
  }

  .footer-text02 {
    font-size: 2rem;
  }

  .footer-text02 span {
    font-size: 1em;
    vertical-align: middle;
  }


  /*copyright*/
  .copy-text {
    font-size: 0.75rem;
    padding: 1em 0;
  }

  /*  Content(mediaQuery 768-)
---------------------------------------*/
  .block-title01 {
    font-size: 1.8rem;
  }

  .block-text {
    font-size: 0.85rem;
  }

  .item-title01 {
    font-size: 1.25rem;
  }

  .item-title02 {
    font-size: 1.2rem;
  }

  .item-title03 {
    font-size: 1.3rem;
  }

  .item-title04 {
    font-size: 1.586rem;
  }

  .item-title05 {
    font-size: 1.1rem;
  }

  .item-title06 {
    font-size: 1rem;
  }

  .item-title07 {
    font-size: 1.15rem;
  }

  .item-text01 {
    font-size: 0.85rem;
  }

  .item-text02 {
    font-size: 0.8rem;
  }

  .item-text03 {
    font-size: 0.9rem;
  }

  .item-text04 {
    font-size: 0.7rem;
  }

  /*料金表*/
  .cost-table01 td {
    padding: 1.2rem 2rem 1.2rem 0;
  }

  .cost-table02 th {
    padding: 1.2rem 0 1.2rem 1.5rem;
  }

  .cost-table02 td {
    padding: 1.2rem 2rem 1.2rem 0;
  }



  /*medical contents*/
  .medical-contents {
    width: 98%;
    margin: 0 auto;
  }

  .medical-contents>a {
    width: 31.5%;
  }

  .medical-contents>li {
    width: 30.5%;
  }

  .medical-contents-title01 {
    font-size: 1rem;
  }

  .medical-contents-title01 {
    font-size: 0.9rem;
  }

  .medical-contents02>a:nth-child(6) {
    margin-left: 10.125%;
  }

  .medical-contents02>a:last-child {
    margin-right: 10.125%;
  }

  /*column*/
  .column-title {
    font-size: 1.5rem;
  }

  .column-img {
    margin: 0;
    width: 32%;
    padding-right: 1rem;
  }

  .column-arrow {
    width: 2rem;
  }

  /*flow*/
  .num-text01 {
    font-size: 1rem;
  }

  .flow-box>div.flow-content {
    width: 30%;
  }

  .flow-box>div.flow-img {
    width: 5%;
  }

  .flow-img img {
    width: 1.2em;
    transform: none;
    position: absolute;
    top: 5.5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /*  1ページ目
---------------------------------------*/
  /* news */
  .news-box a:nth-child(4),
  .news-box a:nth-child(5),
  .news-box a:nth-child(6) {
    display: block;
  }

  /* レンタルボード */
  .rentalboat-box>div {
    width: 45%;
  }

  /*  釣果情報
---------------------------------------*/
  .mitama-pager ul li a,
  .mitama-pager ul li span {
    font-size: 1.25rem;
  }

  /*  お問い合わせ
---------------------------------------*/
  .contact-table {
    width: 90%;
    margin: 0 auto;
  }

  .contact-table th {
    width: 30%;
  }

  .contact-table td {
    width: 70%;
  }

  .contact-table th,
  .contact-table td {
    display: table-cell;
    padding: 1em 0.5em;
    vertical-align: middle;
  }

  .button-contact input {
    width: 30%;
  }


  /*  googlemap枠
----------------------------------*/
  .ggmap {
    padding-bottom: 35%;
  }

  /*  pagetop設定
----------------------------------*/
  .pagetop {
    bottom: 5px;
    right: 10px;
    width: 60px;
  }

}

@media only screen and (min-width: 1024px) {

  html {
    font-size: 15px;
  }

  .gridContainer01 {
    width: 80%;
  }

  .gridContainer02 {
    width: 75%;
  }

  .gridContainer03 {
    width: 70%;
  }

  .footerContainer {
    width: 90%;
  }

  /*  改行 
---------------------------------------*/
  .br-ip-tab::before {
    content: "";
  }

  /*  行間,文字間 
---------------------------------------*/
  .text-space20 {
    letter-spacing: 0.01em;
  }

  .text-space30 {
    letter-spacing: 0.015em;
  }

  .text-space40 {
    letter-spacing: 0.02em;
  }

  .text-space50 {
    letter-spacing: 0.025em;
  }

  .text-space100 {
    letter-spacing: 0.05em;
  }

  .text-space110 {
    letter-spacing: 0.058em;
  }

  .text-space130 {
    letter-spacing: 0.08em;
  }

  .text-space150 {
    letter-spacing: 0.1em;
  }

  .text-space120 {
    letter-spacing: 0.06em;
  }

  .text-space160 {
    letter-spacing: 0.085em;
  }

  .text-space170 {
    letter-spacing: 0.09em;
  }

  .text-space300 {
    letter-spacing: 0.15em;
  }

  /*  flexbox
---------------------------------------*/
  /*box*/
  .flex-60-40>div:nth-child(1) {
    width: 66%;
  }

  .flex-60-40>div:nth-child(2) {
    width: 34%;
  }

  .flex-40-60>div:nth-child(1) {
    width: 34%;
  }

  .flex-40-60>div:nth-child(2) {
    width: 66%;
  }

  /*スペース*/
  .flex-left30 {
    padding-left: 1rem;
  }

  .flex-left50 {
    padding-left: 1.66rem;
  }

  .flex-left60 {
    padding-left: 1.99rem;
  }

  .flex-left70 {
    padding-left: 2.32rem;
  }

  .flex-right30 {
    padding-right: 1rem;
  }

  .flex-right50 {
    padding-right: 1.66rem;
  }

  .flex-right70 {
    padding-right: 2.32rem;
  }

  /*  hedaer
---------------------------------------*/
  .header-tel-title {
    font-size: 13.5px;
  }

  .header-tel-icon {
    width: 1.3em;
    padding-bottom: 0.3rem;
  }

  .menu>li a {
    font-size: 12px;
    padding: 2.5rem 0;
  }

  .navdrop {
    font-size: 12px;
  }

  .navdrop-inner>ul li a {
    font-size: 12px;
  }

  .pc-menu {
    padding: 1.5rem 3%;
  }

  .breadcrumb span {
    font-size: 11px;
  }

  /*  Content
---------------------------------------*/
  /*  pagetop設定
----------------------------------*/
  .pagetop {
    bottom: 5px;
    right: 65px;
    width: 65px;
  }

}

@media only screen and (min-width: 1440px) {

  html {
    font-size: 20px;
  }

  .gridContainer01 {
    width: 75%;
  }

  .gridContainer02 {
    width: 70%;
  }

  .gridContainer03 {
    width: 65%;
  }

  .footerContainer {
    width: 85%;
  }

  /*  hedaer
---------------------------------------*/
  .header-tel-title {
    font-size: 18.96px;
  }

  .header-tel-icon {
    width: 1.3em;
    padding-bottom: 0.5rem;
  }

  .menu>li a {
    font-size: 17px;
    padding: 3rem 0;
  }

  .navdrop {
    font-size: 17px;
  }

  .navdrop-inner>ul li a {
    font-size: 17px;
  }

  .pc-menu {
    padding: 2rem 3%;
  }

  .breadcrumb span {
    font-size: 12px;
  }


  /*  Content
---------------------------------------*/
  /*  pagetop設定
----------------------------------*/
  .pagetop {
    bottom: 5px;
    right: 90px;
    width: 80px;
  }

}

@media only screen and (min-width: 1600px) {

  .gridContainer01 {
    width: 75%;
    max-width: 1500px;
  }

  .gridContainer02 {
    width: 68.75%;
    max-width: 1375px;
  }

  .gridContainer03 {
    width: 59.375%;
    max-width: 1187.5px;
  }

  /*  flexbox
---------------------------------------*/
  /*box*/
  .flex-60-40>div:nth-child(1) {
    width: 60%;
  }

  .flex-60-40>div:nth-child(2) {
    width: 40%;
  }

  .flex-40-60>div:nth-child(1) {
    width: 40%;
  }

  .flex-40-60>div:nth-child(2) {
    width: 60%;
  }

  .box06>div {
    width: 9.5em;
    height: 9.5em;
  }

  /*スペース*/
  .flex-left30 {
    padding-left: 1.5rem;
  }

  .flex-left50 {
    padding-left: 2.5rem;
  }

  .flex-left60 {
    padding-left: 3rem;
  }

  .flex-left70 {
    padding-left: 3.5rem;
  }

  .flex-right30 {
    padding-right: 1.5rem;
  }

  .flex-right50 {
    padding-right: 2.5rem;
  }

  .flex-right70 {
    padding-right: 3.5rem;
  }

  /*  list
---------------------------------------*/
  .merit-list {
    height: 5em;
  }

  .demerit-list {
    height: 5em;
  }

  .meri-text {
    height: 8em;
  }

}

@media only screen and (min-width: 1920px) {

  html {
    font-size: 26px;
  }

  .gridContainer01 {
    width: 75%;
    max-width: 1800px;
  }

  .gridContainer02 {
    width: 70%;
    max-width: 1680px;
  }

  .gridContainer03 {
    width: 65%;
    max-width: 1560px;
  }



}