@charset "utf-8";
/* CSS Document */
:root {
    --color-default: #1E1717;
    --color-red: #C52818;
    --color-gray: #ECECEC;
    --color-white: #FFFFFF;
    --color-blue: #2A3D58;
    --color-indigo: linear-gradient(to bottom, #2A3D58, #264471);
    --color-lightblue: linear-gradient(to bottom, #FFFFFF, #7EAAD3);
    --color-gradation: linear-gradient(to bottom, #ECECEC, #A0ADBE);
    --color-recruit: linear-gradient(to bottom, #9CCEFF, #9CDE97);

    --font-size-default: 16px;
    --font-weight-normal: 400;

    --sp-wrapper-width: clamp(380px, 45vw ,450px);
	--header-height: clamp(78px, 20.8vw, 104px);
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box; }
html{
  scroll-padding-top: var(--header-height)}
body {
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-normal);
  font-family: 'Zen Kaku Gothic New', 'Roboto', sans-serif;
  font-style: normal;
  color: var(--color-default);
  line-height: 1.6;
  margin: 0;
  padding: 0; }
.fnt_roboto{
  font-family: 'Roboto', sans-serif;}
#outer{
  background: var(--color-gray);
  background-image: url(../images/general/outer-bg.jpg);
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
  width:100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;}
#outer_left,
#outer_right{
  padding: 0 20px;
  width: calc((100vw - var(--sp-wrapper-width)) / 2);
  max-width: 400px;
  display: flex;
  align-items: center;
  flex-direction: column;}
.outer_left_blk_header {
  width: calc(100% - 2em);
  transform: translate(1em, 2em);}
.outer_left_blk_header [class^="icon-"]{
  font-size: 1.5em;
  font-weight: 400;}
.outer_left_blk_header a {
    padding: 1.5em;
    display: block;
    color: var(--color-white);
    transition-duration: .3s;
    background: var(--color-red);
    border: 1px solid var(--color-red);
    border-radius: 10px;}
.outer_left_blk_header a:hover{
  background: var(--color-white);
  color: var(--color-red);
  opacity: 1;}
.blk_outer_left .bgc_indigo{
  padding: 4em 1em 1em;}
.blk_outer_left .flex_space{
  gap: 1em;}
.blk_outer_left .flex_space a{
  color: white;
  padding: 1em .5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid var(--color-white);
  /*min-width: 120px;*/
  flex-grow: 1;}
.blk_outer_left .lnk_btn {
  min-width: 190px;
  background: var(--color-white);
  color: var(--color-red);
  padding : 0.25em 1em;
  left:0;
  transform: unset; }
.blk_outer_left .lnk_btn:hover {
  background: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-white);}
.blk_outer_left .lnk_btn:after{
  color: var(--color-red);}
.blk_outer_left .lnk_btn:hover:after{
  color: var(--color-white);}
#outer_right {
  padding-top: calc(2em + 94px);
  transform: translateX(-16px);}
#nav_outer{
  width: 100%;
  background: var(--color-white);}
#nav_outer li a.lnk_btn{
  width: 100%;
  min-width: 198px;}
#nav_outer li a.lnk_btn:hover {
  border-bottom: 1px solid;}
#container{
  width: var(--sp-wrapper-width);
  margin:0 auto;
  position: relative;
  background:  var(--color-white);
  z-index: 10;}
main{
  padding-top: var(--header-height);}
img {
  border: none;
  max-width: 100%;
  height: auto;}

a img {
  border-style: none; }
a {
  outline: 0;
  color: #05193B;
  text-decoration: none; }
a:hover {
  opacity: 0.7; }
a img, :link img, :visited img {
  border: none; }
/* delate dot boader of link for New Mozilla \*/
a {
  overflow: hidden; }
a[href^="tel:"] { cursor: default; }
a[href^="tel:"]:hover { opacity: 1.0; }
img, fieldset, abbr, acronym {
  border: 0; }
hr {
  border: 0;
  border-top: 1px solid #9D9D9D;
  margin: 1.5em 0; }
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }
.clearfix {
  min-height: 1px; }
ul {
  list-style-type:none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 0px; }

li {
  list-style-type: none; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;}
p {
  margin-bottom: 1.5em; }

p:last-of-type {
  margin-bottom: 0; }
/* ▼　ヘッダ　▼ */
#site_header{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: var(--sp-wrapper-width);
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.8);}
#site_header .content{
  position: relative;
  height: 100%;
  z-index: -1;}
#site_title {
    height: 100%;
    display: flex;
    align-items: center;}
#nav_main,
.nav_btn {
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  -o-flex: 1;
  flex: 1;
  display: flex;
  justify-content: flex-end; }
.nav_btn{
  margin-bottom: 1em;}
#nav_main ul,
.nav_btn ul {
  text-align: right;
  position: relative;}
#nav_main li {
  display: inline-block;
  margin: 0 1em; }
.nav_btn li{
  margin: 0 0.25em;}
#nav_main li.nav_privacy{
  display: none;}
#nav_main li:first-of-type,
.nav_btn li:first-of-type{
  margin-left: 0;}
#nav_main li:last-of-type,
.nav_btn li:last-of-type{
  margin-right: 0;}
#nav_main .bdr_blue {
  padding: 0 5px 3px; }
#nav_main .lnk_btn_wrap{
	min-width: 6em;}
.nav_btn .lnk_btn.txt_lightblue{
	border-color: #059ABE;}
.nav_btn .lnk_btn.txt_lightblue .btn_inner{
	color: #059ABE;}
.nav_btn .lnk_btn.txt_lightblue::before{
	background: #059ABE;}
.nav_btn .lnk_btn.txt_lightblue:hover .btn_inner{
	color: #FFFFFF;}
/* ▽▽ハンバーガーメニュー▽▽ */
#nav_slide {
  display: none; }
.nav_slide_btn_wrap{
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(72px, 19.2vw, 96px);
	height: var(--header-height);
	background: var(--color-red);
	border-bottom-left-radius: 10px;}
.nav_slide_btn {
	position: relative;
	width: 100%;
    height: var(--header-height);
	cursor: pointer;
	display: block;
	z-index: 100;
	-webkit-transition: all 1s;
	transition: all 1s; }
.nav_slide_btn .area_lne_humberger {
	position: relative;
	width: clamp(24px, 6.4vw, 32px);
	height: clamp(12px, 3.2vw, 16px);
	margin-bottom: 0.5em;
}
.nav_slide_btn .lne_humberger{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	height: clamp(1.5px, 0.4vw, 2px);
	width: clamp(24px, 6.4vw, 32px);
	left: 0;
  	background-color: var(--color-white);}
.nav_slide_btn .lne_humberger:nth-of-type(1) {
	top: 0px; }
.nav_slide_btn .lne_humberger:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
    width: clamp(18px, 4.8vw, 24px)}
.nav_slide_btn .lne_humberger:nth-of-type(3) {
    bottom: 0;}
.nav_slide_btn_wrap .txt_menu,
.nav_slide_btn_wrap .txt_close{
	position: relative;
	color: var(--color-white);
    font-size: clamp(12px, 3.2vw, 16px);
    white-space: nowrap;}
.nav_slide_btn_wrap .txt_menu{
	display: block;}
.nav_slide_btn_wrap .txt_close{
	display: none;}

/* ▽▽開閉時のアニメーション▽▽ */
#nav_slide:checked ~ .nav_slide_btn .ico-menu {
  display: none; }
#nav_slide:checked ~ .nav_slide_btn .ico-close {
  display: inline; }
#nav_slide:checked ~ .nav_slide_btn .lne_humberger:nth-of-type(1) {
    transform: translateY(clamp(6px, 1.6vw, 8px)) rotate(30deg);}
#nav_slide:checked ~ .nav_slide_btn .lne_humberger:nth-of-type(2) {
    display: none;}
#nav_slide:checked ~ .nav_slide_btn .lne_humberger:nth-of-type(3) {
    transform: translateY(clamp(-6px, -1.6vw, -8px)) rotate(-30deg);}
#nav_slide:checked ~ .nav_slide_btn_wrap .txt_menu{
	display: none;}
#nav_slide:checked ~ .nav_slide_btn_wrap .txt_close{
	display: block;}
	
#nav_slide_cnt {
  width: 0%;
  height: 100vh;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: -1;
  position: fixed;
  right: 0;
  /*右からスライド*/
  top: 0;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s; }

#nav_slide:checked ~ #nav_slide_cnt {
  width: 100%;
  opacity: 1; }

/*#nav_slide_cnt li{
	border-bottom: 1px solid #C1C2CC;}*/
#nav_slide_cnt .nav_side_header{
  height: var(--header-height);
  padding: 5%;}
#nav_slide_cnt .flex_space {
    padding: 1.5em 5% 1.5em;
    background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-white) 50%, var(--color-red) 50%, var(--color-red) 100%);}
#nav_slide_cnt .flex_space .lnk_btn  {
  min-width: 0;
  border-radius: 10px;
  left: 0;
  transform: none;
  line-height: 1.25;
  padding-top: 1.5em;}
#nav_slide_cnt .flex_space .lnk_btn{
  background: var(--color-white);
  color: var(--color-red);}
#nav_slide_cnt .flex_space .lnk_btn [class^="icon-"] {
  font-size: 1.5em;
  font-weight: 400;}
#nav_slide_cnt .flex_space .lnk_btn:after {
  content: no-close-quote;}
#nav_slide_cnt .flex_space a.lnk_btn:hover {
  background: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-white);}
.menu_slide{
  border-top: 1px solid #E1DEDE;
  margin-top: 1em;}
#nav_outer .menu_slide{
  border-top: none;}
.menu_slide a {
  display: block;
  margin: 0;
  padding: 1.5em 1em;
  line-height: 1.2;
  position: relative;
  border-bottom: 1px solid #E1DEDE; }
.menu_slide a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #999999;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;}
.menu_slide a:hover::before {
  transform: scaleX(1);}
.menu_slide a:after{
  font-family: iconmett;
  content: "\e900";
  color: var(--color-red);
  font-size: 1.36em;
  font-weight: 400;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);}
.scroll_off {
  overflow:hidden;}
.menu_sub{
  padding: 0.5em 0;
  border-bottom: 1px solid #E1DEDE;}
.menu_sub li a{
  display:block;
  padding: 0.5em 2.5em;}
.menu_sub li a [class^="icon-"]{
  color: var(--color-red);
  font-size: 0.5em;
  transform: translateY(-25%);
  display: inline-block;}
#nav_slide_cnt .bgc_lightblue{
  padding: 5em 0 3em;
  position: relative;
  z-index: -1;}
#nav_slide_cnt .bgc_lightblue .flex_center a {
  background-color: var(--color-white);
  width: 134px;
  height: 134px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 0.5em;
  margin: 0.5em;}
/*#nav_slide_cnt .bgc_lightblue .flex_center a:hover {
    transform: scale(0.95);}*/
.hvr_scare_shrink a{
  display: block;
  transition: transform 0.25s ease;}
.hvr_scare_shrink a:hover{
  opacity: 1.0;
  transform: scale(0.95);}
/* ▼　メイン　▼ */
/*wpネイティブ*/
/** reset.cssでリセットしたタグの再定義 **/
.post, .page{margin: 0;}
.entry-content p { margin: 0;padding: 0;}
.entry-content p:first-of-type { padding-top: 0;}
.entry-content .display_flex p {padding-top:0;}
.entry-content strong { font-weight: 500; }
.entry-content em { font-style: italic; }
.entry-content h1 { font-size: 2em;font-weight: 500; line-height:4;}
.entry-content h2 { font-size: 1.75em;font-weight: 500; line-hieght: 3.5;}
.entry-content h3 { font-size: 1.25em;font-weight: 500; line-height:2.5; }
.entry-content h4 { font-size: 1.125em;font-weight: 500; line-height:2.25; }
.entry-content h5 { font-size: 1em;font-weight: 500; }
.entry-content h6 { font-size: 0.875em; }
.entry-content ul, .entry-content ol {}
.entry-content blockquote { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px;}
.entry-content img { height: auto; max-width: 100%;}
/*.entry-content table{width: 100%;}*/
.entry-content th,.entry-content td{padding: 0.25em 0.5em;vertical-align:top;}
.entry-content a {text-decoration: underline;color:#2438A7;}
.entry-content a.lnk_btn,.entry-content a.link_button,.entry-content .hvr_uline_hide a{text-decoration: none;}
/**　ワードプレス固有のCSSクラスの復元 **/
.aligncenter { display: block; margin: 0 auto;}
.alignright { float: right; margin: 0 0 10px 20px;}
.alignleft { float: left; margin: 0 20px 10px 0;}
.wp-caption { border: 1px solid #ddd; text-align: left; background-color: #f3f3f3; padding: 5px; border-radius: 3px;}
.wp-caption img { margin: 0; padding: 0; border: 0 none;}
.wp-caption p.wp-caption-text { font-size: 14px; line-height: 1.5; margin: 0; padding: 0;}
/*WP追加*/
.entry-content .border_bottom{
  border-bottom: 1px solid #9D9D9D;}
.entry-content dl{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;}
.entry-content dt{
  font-size: 1.125em;
  font-weight: 500;
  width: 5em;
  margin-right: 2em;}
.entry-content dd{
  flex-grow: 1;}
.entry-content ol li{
  text-indent: -1em;
  padding-left: 1em;}
.entry-content ol.list_num_kakko li{
  text-indent: 0;
  padding-left: 40px;}
.entry-content #chart {
  border-collapse:collapse;
  text-align:center;
  vertical-align:middle;}
.entry-content #chart_caption {
  background-color:#5a8bce;
  font-weight:normal;
  color:#FFF;
  vertical-align:middle;}
.entry-content #chart tr td {
  padding:5px;
  border:#666 solid 1px;
  vertical-align:middle;}
/* ▲　ブログ　▲ */

section{
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  opacity: 0;
  visibility: hidden;
  transition: all 2s; }
section.active {
  /*display: block;
  transform : translate(0, 0);*/
  opacity: 1;
  visibility: visible; }
section:first-of-type{
  padding-top: 0;}
#sec_blog{
  padding-top: 0;}
.content_outer {
  max-width: 1000px;
  width: 92%;
  margin: 0 auto; }
.content {
  max-width: 1000px;
  width: 88%;
  margin: 0 auto; }
.content_inner {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto; }
div:has(#breadcrumb) {
  border-top: 1px solid #E1DEDE; }
#breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5em 0;}
#breadcrumb li{
  color: var(--color-red);}
#breadcrumb li:not(:last-of-type)::after{
  content: "-";
  color: var(--color-default);
  margin: 0.5em; }
#breadcrumb li a{
  color: var(--color-default);}
#page_img{
  position: relative;
  overflow: hidden;}
#page_img:after{
  content: '';
    width: 100%;
    height: 100%;
    background: url(../images/general/main-img-bg.png);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;}
#page_title{
  margin-bottom: 3em;}
#page_title.cat_member{
  background: linear-gradient(90deg, rgba(5,154,190,1) 0%, rgba(5,154,190,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);}
#page_title h1{
  padding: 1.5em 0;
  position: relative;}
#page_title h1:after {
    content: '';
    width: 56px;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--color-red);}
.sec_header_uline {
    position: relative;
    padding-bottom: 1.5em;}
.sec_header_uline:after {
    content: '';
    width: 56px;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-red);}
.sec_header_uline [class^="icon-"]{
  font-size: 1.5em;}
/*ブログ*/
#sec_blog .bgc_gray{
  padding-top: 3em;
  padding-bottom: 3em;}
.blk_blog{
  background: var(--color-white);}
.blk_blog .post_date{
  color: #A9A9A9;
  padding-bottom: 0.5em;
  display: inline-block;}
.blk_blog .area_noimg{
  width: 100%;
  aspect-ratio: 5/4;}
.blk_blog .post-categories li,
.cat_list li {
  display: inline-block;
  margin-right: 0.5em;}
.blk_blog .post-categories li,
.cat_list li a{
  color: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: 0.2em;
  padding: 0 0.2em;
  transition: all 0.3s;}
.cat_list li a:hover{
  color: var(--color-white);
  background: var(--color-red);
  opacity: 1;}
.blk_cat_list.bgc_white{
  padding: 1.5em 0;}
.nav-links{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3em;}
.page-numbers,
.prev-link a,
.next-link a {
    width: 41px;
    height: 48px;
    margin: 0 0.25em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--color-red);
    border: 1px solid var(--color-red);
    color: var(--color-white);
    transition: all 0.5s;;}
a.page-numbers:hover,
.prev-link a:hover,
.next-link a:hover {
  background: 1px solid var(--color-white);
    color: var(--color-red);
    transform: scale(0.9);}
.page-numbers.current{
      background: 1px solid var(--color-white);
    color: var(--color-red);}
.page-numbers.dots {
    background: 1px solid var(--color-white);
    color: var(--color-red);
    border: none;}
.prev-link a,.next-link a{
  width: auto;
  padding: 0.25em 0.5em;
  height: auto;}
.prev-link a [class^="icon-"],.next-link a [class^="icon-"]{
  font-size: 1.36em;
  padding-left: 0.25em;}
.prev-link a [class^="icon-"]{
  transform: rotate(180deg);}
.swiper-wrapper {
  transition-timing-function: linear;}
.swiper-slide {
  width: calc(45% - 1px);
  flex-shrink: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;}

/*リンク*/
.hvr_uline_show a {
  position: relative;
  background-image: linear-gradient(90deg, var(--color-blue), var(--color-blue));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size 0.6s;}
.hvr_uline_show a:hover{
  color: var(--color-blue);
  background-size: 100% 1px;}
.lnk_btn{
  display: inline-block;
    text-align: center;
    min-width: 288px;
    padding: 1em;
    border-radius: 3em;
    position: relative;
    transition-duration: 0.3s;
    overflow: hidden;
    background-color: var(--color-red);
    border: 1px solid var(--color-red);
    color: var(--color-white);
    left: 50%;
    transform: translateX(-50%); }
.lnk_btn:hover {
  background: var(--color-white);
  color: var(--color-red);
  opacity: 1;}
.lnk_btn.no_hover:hover {
  background: var(--color-red);
  color: var(--color-white);}
.lnk_btn:after{
  font-family: iconmett;
    content: "\e900";
    color: var(--color-white);
    font-size: 1.7em;
    padding-left: 5px;
    vertical-align: sub;
    transition: transform 0.5s ease;}
.lnk_btn:hover:after{
  color: var(--color-red);}
.lnk_btn.no_hover:hover:after{
  color: var(--color-white);}
/*複数共通*/
.blk_bg_txt{
  position: relative;
  height: 5.94em;
  display: flex;
  align-items: center;
  justify-content: center;}
.blk_bg_txt h2{
  z-index: 10;}
.area_bg_txt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5.94em;
  font-weight: 700;
  color: var(--color-gray);}
.bgc_gradation .area_bg_txt{
  color: var(--color-white);}
#sec_intro{
  border-top: 1px solid #E1DEDE;
  overflow: hidden;}
.sec_intro_img_caption{
  z-index: 10;
  position: relative;
  transform: translateY(0.75em);}
.sec_intro_img_caption li span{
  padding: 0 5px;}
.sec_intro_img_caption li:first-of-type {
    margin-bottom: 2px;}
.sec_intro_img_caption li:last-of-type{
  margin-left: 2em;}
.bgc_indigo .sec_header_uline:after{
  background: var(--color-white);}
.box_flow{
  background: var(--color-gray);
  border-radius: 10px;
  padding: 1em;
  margin-bottom: 2em;
  align-items: center;
  position: relative;}
.box_flow:after {
  content: '';
  width: 2em;
  height: 2em;
  background: var(--color-gray);
  position: absolute;
  bottom: -0.8em;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%) rotate(45deg);}
.box_flow:last-child:after{
  content: none;}
.box_flow .area_step{
  font-family: 'Roboto', sans-serif;
  background-color: var(--color-red);
  color: var(--color-white);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  margin-right: 1em;}
.box_flow .area_txt{
  flex: 1;}
.blk_contact{
  padding: 3em 0.5em 5em;}
.blk_contact + .lnk_btn {
    transform: translate(-50%, -50%);}
/* ▼　フッター　▼ */
footer{}
#nav_footer { }
#nav_footer ul{}
#nav_footer li {
  margin-bottom: 3px;
  color: var(--color-white);}
#nav_footer a {
  color: var(--color-white);
  padding: 1.5em 2em;
  background-color: var(--color-red);
  border: 1px solid var(--color-red);
  display: block;
  position:relative;
  transition-duration: 0.3s;}
#nav_footer a:after {
  font-family: iconmett;
  content: "\e900";
  color: var(--color-white);
  font-size: 1.7em;
  font-weight: 400;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);}
#nav_footer a:hover {
  background: transparent;
  color: var(--color-red);
  opacity: 1;}
#nav_footer a:hover:after {
  color: var(--color-red);}
footer a.bgc_recruit{
  display: inline-block;
  min-width:352px;
  padding: 1.5em 2em;
  border-radius: 10px;
  position: relative;}
footer a.bgc_recruit:after{
  content: '';
  display: inline-block;
  background-image: url(../images/general/logo-mettgroup.png);
  background-size: contain;
  width: 32px;
  height: 32px;
  vertical-align: bottom;
  margin-left: 0.5em;}

#pagetop {
  width: 40px;
  height: 40px;
  background: var(--color-indigo);
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  right: 20px;
  cursor: pointer;}
#pagetop:before {
  position: absolute;
  content: '';
  width: 40%;
  height: 40%;
  border-top: 3.5px solid #fff;
  border-right: 3.5px solid #fff;
  border-radius: 3px;
  transform: rotate(315deg);
  transform-origin: center center;
  top: 40%;
  left: 30%;}
/*===============================================
●smart.css  画面の横幅が768pxから
===============================================*/
@media screen and (min-width: 881px) {
  .pconly {
    display: block; }
  .sponly {
    display: none !important; }
}
/*===============================================
●smart.css  画面の横幅が767pxまで
===============================================*/
@media screen and (max-width: 880px) {
	.pconly {
      display: none !important; }
	.sponly {
      display: block; }
    #outer{
      background-position: center bottom;}  
}
@media screen and (max-width: 540px) {
	#outer{
	  display: none;}
	#container,
	#site_header{
		width: 100%;}
}