@charset "utf-8";

/*-----------------------------------
base
-----------------------------------*/

.sp {
  display: none;
}

.tab {
  display: none;
}

.pc {
  display: block;
}

html {
  font-size: 62.5%;
}

/* https://willcloud.jp/knowhow/font-family/#font-family-2 */

body {
  font-size: 16px;
	font-size: 1rem;
	width: 100%;
	margin: 0 auto;
}
body * {
  box-sizing: border-box;
}

.inner{
  width: 100%;
	max-width: 1000px;
  margin: 0 auto;
}

article {
  padding: 200px 0;
}

section {
  width: 100%;
  padding: 100px 0;
}
header {
  background: #fff;
  width: 100%;
  z-index: 3;
}

footer{
  padding: 40px;
}

footer .company{
  font-size: 12px;
  color: #333333;
}

footer small{
  text-align: center;
  font-size: 12px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex__sta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex__btw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex__aro {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

h2,h3,h4,p,li,a,span {
  color: #333333;
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;
  line-height:  1.75;
  letter-spacing: 0.02em;
}

h1 {
  font-size: 20px;
}
h2 {
  color: #333;
  font-size: 46px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}
h3 {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #5A5A5A;
  padding: 12px 19px;
  margin: 100px 0 60px;
}
h4 {
  font-size: 2px;
}
p,li {
  font-size: 22px;
  text-align: center;
}

img,
video {
  width: 100%;
  height: auto;
}

a,a:link {
  display: block;
  text-decoration:none;
  color: #333333;
  cursor: pointer;
}
a:visited {
  color: #333333;
  cursor: pointer;
}

.btn a,.btn a:link {
  text-decoration:none;
  color: #fff;
  cursor: pointer;
}
.btn a:visited {
  color: #fff;
  cursor: pointer;
}

a:hover {
  text-decoration:none;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.6s;
}

.t_left{
	text-align: left;
}
.t_center{
	text-align: center;
}
figure{
  font-weight: bold;
}
figcaption p{
  color: #E81818;
  font-size: 20px;
  font-weight: bold;
}
figcaption span{
  color: #fff;
  background: #E81818;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 4px;
}


/*-----------------------------------
btn
-----------------------------------*/
.btn{
  position: relative;
  width: 100%;
  max-width: 397px;
  text-align: center;
  color: #fff;
  background: #2296DE;
  border: 1px solid #707070;
  border-radius: 0px;
  margin: 10px 20px;
  cursor: pointer;
}
.btn a {
  padding: 22px 0;
  font-weight: bold;
  font-size: 33px;
  letter-spacing: 0.06em;
}

.btn:after{
  position: absolute;
  background: url(../img/common/btn_arrow_white.svg)no-repeat center center /contain;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 52%;
  right: 10%;
  transform: translate( 0%,-50%);
}

.btn:hover {
  background:#fff;
	color: #2296DE;
  border: 1px solid #2296DE;
  transition: 0.6s;
  opacity: 0.8;
}
.btn a:hover {
	color: #2296DE;
}

.btn:hover:after{
  background: url(../img/common/btn_arrow_red.svg)no-repeat center center /contain;
  transition: 0.6s;
  opacity: 0.8;
}


/*-----------------------------------
テキスト色
-----------------------------------*/

.t_yellow {
  color: #FFF15E;
}

.t_red {
  color: #A0323D;
}

.t_darkred {
  color: #C00000;
}

.t_gray {
  color: #404040;
}


/*-----------------------------------
bg
-----------------------------------*/
.bg_white {
  background: #fff;
}

.bg_gray{
	background: #f1f1f1;
}

.bg-darkgray {
  background: #E5EBEF;
}

.bg_yellow {
  background: #FFF376;
}

.bg_lightblue {
  background: #96E2FF;
}

.bg_green {
  background-color: #4AB02A;
}
.bg_red {
  background-color: #F35353;
}
.bg_blue {
  background-color: #246AC4;
}
.bg_orange {
  background-color: #FFA52C;
}




/*-----------------------------------
スペース
-----------------------------------*/
.mb100 {
  margin-bottom: 100px;
}



/*-----------------------------------
font
-----------------------------------*/
.lex {
  font-family: 'Lexend Deca', sans-serif;
}

.maru {
  font-family: 'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','メイリオ', Meiryo, "游ゴシック", "Yu Gothic", sans-serif;
}
.kaku {
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo UI','Yu Gothic UI', "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
.min{
	font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif;
}




/*---------------------------------------------------------------------
レスポンシブ
---------------------------------------------------------------------*/



/*************** タブレットレスポンシブ *****************/
@media screen and (min-width:767px) and ( max-width:1024px) {
.pc {
  display: none;
}

.sp {
  display: none;
}

.tab {
  display: block;
}

figure {
  width: 100%;
}


}

/*************** スマホレスポンシブ *****************/
@media screen and (min-width:300px) and ( max-width:750px) {

.pc {
  display: none;
}

.tab {
  display: none;
}

.sp {
  display: block;
}

article {
  padding: 100px 0;
}

section {
  padding: 50px 0;
}

#services .inner {
  width: 90%;
}

h2,h3,h4,p {
  line-height: 1.6;
  letter-spacing: 0px;
}

h1 {
  font-size: 36px;
}
h2 {
  font-size: 32px;
  text-align: center;
}
h3 {
  font-size: 32px;
}
h4 {
  font-size: 14px;
}
p,li {
  font-size: 14px;
}

figure {
  width: 100%;
}



}