@charset "utf-8";
/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

.services {
	position: relative;
	margin: 0 0 50px 0;
}
.services > .item{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 50%;
}
.services > .item img{
    width: 100%;
}
.services .itemList{
    width: 90%;
    margin: 0 auto;
    
}
.services .itemList > p{
    display: none;
}
.services .itemList .item{
    clear: both;
    margin: 10px 0;
}
.services .itemList .item img{
    width: 100%;
}
.services .itemList .item div{
    display: none;
}
.services .item:nth-child(1) .itemList .item div{
}
.services .item:nth-child(2) .itemList .item div{
}
.services .itemList .item div p{
    font-size: 13px;
    margin: 0 0;
}
.services .linkButton{
    box-sizing: border-box;
    background: #99bd32;
    color: #000;
    font-size: clamp(13px, 1.9vw, 19px);
    font-weight: bold;
    width: 100%;
}
.services .catch{
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
}
.services .catch p{
    margin: 0 0;
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
    text-align: center;
    font-size: clamp(19px,3.8vw, 38px);
    line-height: 175%;
    -webkit-text-stroke: 5px #fff;
    text-stroke: 5px #fff;
    paint-order: stroke;
}
.bx-wrapper {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
}
.slider > div{
    box-sizing: border-box;
    padding: 0 5px;
}
/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.services .itemList > p{
    display: block;
}
}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 768px) {
.services .itemList .item div{
    display: inline-block;
    font-size: 19px;
    width: calc(100% - 13em);
    vertical-align: middle;
}
.services .linkButton{
    width: 12em;
}
.services .item:nth-child(1) .itemList .item div{
    float: right;
    margin: 0 0 0 1em;
}
.services .item:nth-child(2) .itemList .item div{
    float: left;
    margin: 0 1em 0 0;
}
}