@charset "UTF-8";

/*縦スクロールバーエリアを表示*/
html {
  overflow-y: scroll;
  overflow-x: hidden;
  list-style: none;
}

body {
  font-family:"FB Benton Sans Regular","メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  sans-serif!important;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* @group Reset */
* {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
}

/*通常*/
a:link {
  color:#000;
  transition:0.5s;
  -webkit-transition:0.5s;
	text-decoration: none;
}

/*閲覧済み*/
a:visited {
  color:#000;
	text-decoration: none;
}

/*マウスオン*/
a:hover {
  opacity:0.5;
}

/*クリック中*/
a:active {
	text-decoration: none;
}

/*クリック時の枠線*/
a {
	padding: 0 0 0 0px;
	outline: none;
}

ul, ol {
	list-style: none;
}

img {
	vertical-align: middle;
	max-width:none;
}

/* @end */

/* @group Fluid-img */
img {
	width: auto;
}
/* @end */

/* @group HTML */
html {
	font-size:83%;
}
/* @end */
div, p {
	text-align: justify;
	text-justify: inter-ideograph;
}
header{
  border-bottom: solid 1px #dcdcdc;
  padding: 20px 20px;
}
.container-fluid{
  width:100%;
  height: auto;
  display: block;
  word-break:normal;
}
.logo{
  height: 300px;
}
.logo img{
  position: absolute;
  top: 80%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  padding: 20px;
  width:60%;
}
.key span{
  display: block;
  font-size:1rem;
}
.col-sm-12{
  width:1024px;
  margin:0 auto 100px;
}
h1{
  color:#4C4948;
}
h1 span{
  display: block;
  font-size:1rem;
}
#news h1 img{
  width:90px;
  margin: 0 0 10px 0;
}
#news header{
  border:none;
}
h2,h3{
  font-family:"丸フォーク M","Maru Folk Medium";
  font-family:"UD新ゴ M","UD Shin Go Medium";
}
h2{
  width:100%;
  position: relative;
  display: block;
  text-align: center;
  letter-spacing: 4px;
  margin: 0 0 40px 0;
  font-size:4rem;
}
h2:before{
  width: 100%;
  height: 1px;
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top:50%;
  background:#e6e6e6;
}
h2 span:nth-of-type(1){
  position: relative;
  display: inline-block;
  background-color: #ffffff;
  padding-left: 40px;
  padding-right: 40px;
}
h2 span:nth-of-type(2){
  display: block;
  font-weight: 500;
  font-size:1rem;
  margin: 10px auto 0 auto;
  text-align: center;
}
h3 {
  position: relative;
  padding: 0 0 0 40px;
}
h3::before{
  position: absolute;
  left: 0;
  top:0;
  content:url(../img/icon_h3.png);
}
h3 span{
  font-size:1rem;
}
#info .row{
  border-bottom:solid 1px #dcdcdc;
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
}
#info ul{
  margin: 0;
}
#info .category{
  margin: 0 0 6px 0;
}
#info .category span{
  border-radius:3px;
  background:#D8E2DC;
  font-size:12px;
  padding: 2px 3px;
}
#info .category span.news{
  background:#E8AEB7;
}
#info .category span.design{
  background:#E8AEB7;
  background:#FFD275;
}
#info .ttl{
  font-size: 1.1rem;
}
#info .ttl span{
  line-height: 26px;
}
#about ul{
  font-size: 1.2rem;
}
#business{
  background: #f3f5f6;
  margin: 0 0 80px 0px;
}
#about .inner,
#business .inner,
p.policy{
  width: 870px;
  margin: 0 auto;
}
#about .inner ul,
#business .inner ul{
  padding:0 0 0 30px;
}
#about .inner ul span{
  display: inline-block;
  margin: 0 0 0 5px;
}
#about .name{
  border:solid 1px #e6e6e6;
  padding:10px 10px;
  font-size:2rem;
  position: relative;
  margin: 0 0 40px 0;
}
#about .name img{
  display: block;
  margin:0 auto;
}
.ok_add{
  width: 50%;
  margin: 0 auto;
}
#about .name span.ok{
  position: relative;
  display: block;
  text-align: center;
}
#about .name span.rubi{
  font-size: 0.9rem;
  display: block;
}
#about .name span.address{
  font-size: 0.9rem;
  display: block;
  text-align: center;
}
#business .type{
  padding: 20px 20px;
  position: relative;
  margin: 0 0px 70px 0;
}
#business .inner{
  padding: 50px 0 0 0;
}
#business .inner ul{
  margin: 20px 0 0 0;
  border-top: solid 1px #dcdcdc;
  padding: 20px 0 0 40px;
}
p.policy{
  margin: 0 auto 80px;
  font-size:1.2rem;
}
footer{
  border-top: solid 1px #dcdcdc;
  padding: 20px 20px;
  text-align:right;
}
footer p{
  text-align: right;
}
/*webフォント*/
.c_gold{
  color:#ffd700;
}
.c_white{
  color:#fff;
}
.c_pink{
  color:#f783ac;
}
.my-small {
  font-size: 0.5em
}
.my-big {
  font-size:62px;
}
/* ボタンのスタイル */
.more{
  margin: -50px 0 120px 0;
}
.more .link{
  display: block;
  margin: 0 auto;
  max-width:320px;
}
.buttonIconText02 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 64px;
  padding: 8px 64px 8px 8px;
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
  overflow-wrap: anywhere;
  background-color:#e6e6e6;
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
}

.buttonIconText02__reverse {
  flex-direction: row-reverse;
  padding: 8px 8px 8px 64px;
}

.buttonIconText02_icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  aspect-ratio: 1;
  overflow: hidden;
}

.buttonIconText02_text {
  flex-shrink: 1;
  width: 100%;
}

@media (any-hover: hover) {
  .buttonIconText02 {
    transition: background-color 0.2s;
  }

  .buttonIconText02_icon {
    transition: transform 0.2s;
  }

  .buttonIconText02:hover {
    background-color: #fff100;
    opacity:0.8;
  }

  .buttonIconText02:hover .buttonIconText02_icon {
    transform: translateX(4px);
  }

  .buttonIconText02:hover .buttonIconText02_icon__left {
    transform: translateX(-4px);
  }
}

/* 左矢印アイコンのスタイル */
.iconArrowLeft {
  rotate: 180deg;
}

@media screen and (max-width:960px){
  header{
    margin: 0 0px 50px 0;
  }
  #info .c_ttl.col-sm-8{
    padding: 0;
  }
  #news h1{
    text-align: center;
  }
  .logo{
    height:auto;
    margin: 50px 0 100px 0;
  }
  .logo img{
    width: 70%;
  }
  .col-sm-12{
    width: 100%;
  }
  h2{
    font-size:2rem;
  }
  #about .name img,
  .ok_add{
    width:100%;
  }
#about .name p{
  width: 100%;
}
#about .name p svg{
  width: calc(100% - 0%);
}
#about .inner,
#business .inner,
p.policy{
  width: calc(100% - 20px);
  margin: 0 auto 30px;
}
#business .type{
  margin: 0 0px 30px 0;
}
#about .name{
  margin: 0 0 30px 0;
}
#about .name span.ok{
  font-size:80%;
  display: block;
}
#about .name span.address,
#about .name span.rubi{
  position: static;
}
#about .name span.rubi{
  display: block;
}
}
@media screen and (max-width:420px){
  .logo img{
    width: 100%;
  }
#news header{
  border-bottom:solid 1px #dcdcdc;
}
#info .ttl span{
  line-height: 22px;
}