@charset "utf-8";
/* CSS Document */

/* -------------------------------
 Default Styling
------------------------------- */

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

html{
	scroll-behavior: smooth;
}

/*フォント確定したら設定変更すること*/
body{
	background: #fff;/*要確認*/
	color: #333;
	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 90%;
}

body, ul, li, dl, dt, dd, h1, h2, h3, h4, p, span, div, figure, select, button{
	margin:0;
	padding:0;
}


ul{
	list-style: none;
}
/*line-height*/
p{
	line-height: 1.6;
}
/*img*/
img{
	vertical-align: bottom;
	max-width: 100%;
}

a{
	text-decoration: none;
}
h2{
	margin-bottom: 16px;
}
h3{
	margin-bottom: 8px;
}

/* -------------------------------
　　SP～共通
------------------------------- */
.wrapper{
	min-height: 100vh;
	position: relative;
    padding-bottom: 80px;/*←footerの高さ*/
}
 /* ---------- ヘッダー ----------　*/
.header{
	background:#333;
	color: #fff;
}
.header_inner{
	height: 50px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 0 0 2vw;
	max-width: 1280px;
	margin: 0 auto;	
}
.header_inner a{
	font-size: 0.85rem;
	color: #fff;
	padding: 4px 8px;
	border: 1px solid #fff;
	border-radius: 999px;
	transition: all .2s ease;
}
.header_inner a:hover{
	color: #333;
	background: #ccc;
	border: 1px solid #ccc;
}
/* ----------キービジュアル---------- */
.keyVisual{
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: #176C41;
}
.KeyVisual_parts{
	width: 100%;
	max-width: 50px;
	position: absolute;
}

/* ----------背景全面塗り&要素が真ん中揃えの各ブロックの設定---------- */
.contentsblock{
	min-height: 30vh;
	width:100%;
	padding: 32px 0;
	display: grid;
	place-items:center;
}

.background_present{
	background: url("../image/lp05.jpg") no-repeat center 20%;
}
.background_grey{
	background: #cccccc;
}
.background_green{
	background: #176C41;
	color: #fff;
}

.container{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 4vw 0 4vw;
	overflow: hidden;
}

.inner{
	margin: 0 auto;
	max-width: 1000px;
	text-align: center;
}
.inner p{
	text-align: left;
}
.present_textbox{
	padding: 1rem;
	background: rgba(255,255,255,0.6);
}

/*　「馬サブロー」ロゴのリンクボタン　*/

.uma36_link_wrap{
	text-align: center;
	max-width:500px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin: 2rem auto 0;
	padding: 0.5rem;
	background: #fff;
	color: #333;
}

.uma36_logo_link{
    width: 50%;
	min-width: 130px;
	max-width: 150px;
}

.uma36_logo_link:hover{
  opacity: 0.6;
  transition: opacity .2s;
}

/* ----------ダウンロード訴求パート（２箇所に同じスタイルを使用）---------- */

/* リボン風の見出し */
.ribbon9 {
	z-index: 10;
  	margin-bottom: 2rem;
  display: inline-block;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
}
.ribbon9:before {/*左側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -24px;
  border: 20px solid #56adf3;
  border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon9:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;/*-3px*/
  right: -24px;/*-17px*/
  border: 20px solid #56adf3;/*1rem*/
  border-right-color: transparent;/*山形に切り抜き*/
}

.ribbon9 p {
	  z-index: 2;
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 3rem;
  line-height: 45px;
  font-size: 20px;
  font-weight: 600;
  color: #FFF;
  background: #2196F3;/*真ん中の背景色*/
}
.ribbon9 p:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #397eb5;/*左の折り返し部分*/
}
.ribbon9 p:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #397eb5;/*右の折り返し部分*/
}

/*線吹き出しの見出し*/
.download_heading{
	position: relative;
	padding: 0 1rem 0.5rem;
	color: #2196f3;
}
.download_heading::before,.download_heading::after{
	position: absolute;
	content: '';
	height: 1rem;
	top: 4px;
}
.download_heading::before{
    border-left: solid 2px #2196f3;
    left: 0;
    transform: rotate(-30deg);
}

.download_heading::after{
    border-right: solid 2px #2196f3;
    right: 0;
    transform: rotate(30deg);
}
/*リンクボタン、QRコード*/
.download_links{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.app_btn_wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 8px;
}

.app_btn_box {
	width: 100%;
	max-width:200px;
	text-align:center;
}

.app_btn {
	padding:4px 18px 15px 10px;
}
.app_btn_box a:hover{
	opacity: 0.6;
}
.qr_img {
	width:140px;
	padding-right:7px;
	margin:0 auto;
}

/* ----------メインコンテンツ（画像と文章が交互に並ぶ部分）---------- */
.main_contents{
	padding: 48px 4vw;	
}
.main_contents_item{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 32px;
}
.main_contents_item:last-child{
	margin-bottom: 0px;
}

.main_contents_img,.main_contents_text{
	margin-bottom: 16px;
}

figure.main_contents_img{
	transform: skewX(-17deg);
	overflow: hidden;
}

.main_contents_img img{
	transform: skewX(17deg) scale(1.22);
}
.main_contents_text_p{
	text-align: justify;
	text-indent: 0.5em;
}

.main_contents_text h3{
	display: table;
	background: #176C41;
	transform: skewX(-17deg);
	margin: 0 0 8px -3rem;
	padding: 0.25rem 2.5rem 0.25rem 2.5rem;
}
.main_contents_text h3 span{
	display: table-cell;
	transform: skewX(17deg);
	color: #fff;
	font-size: 1.125rem;
}
.attention{
	padding: 0.5rem;
}

/*　----------フッター----------　*/

footer{
	background: #333;
	color: #fff;
    width: 100%;
    text-align: center;
    padding: 30px 0;
 	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

/*TOPへ戻るボタン*/
#page_top {
  z-index: 1;
  position: fixed;
  width: 50px;
  height: 50px;
  right: 10px;
  bottom: 10px;
}

#page_top a {
  border-radius: 50%;
  background: rgba(100,100,100,0.8);
  position: fixed;
  width: 50px;
  height: 50px;	
  right: 10px;
  bottom: 10px;
  box-shadow: rgba(33, 26, 90, 0.24) 0px 3px 8px;/*#5*/
}


#page_top a:hover {
  opacity: 0.8;
  transition: opacity .5s;
}
#page_top a img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
  width: 32px;
  height: 32px;
}

/*----------汎用----------*/
.display_pc{
	display: none;
}
.mb_common{
	margin-bottom: 16px;
}
.marker{
	background:linear-gradient(transparent 60%, #ff6 60%);
}
.bold_red{
	font-weight: 800;
	color: red;
}
.bold_green{
	font-weight: 800;
	color: #176C41;
}