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

@media screen and (min-width:768px), print{
/*----------------------------------------------------------------------
PC Style
----------------------------------------------------------------------*/

/**********************************************************/
/* メインエリア */
/**********************************************************/


main h1 {
	background-image:url(../../about/images/h1_bg.jpg);
	
}

#trouble_solution p.headline {
	font-size:24px;
	text-align:center;
	line-height:1.7;
	letter-spacing:2px;
	margin-bottom:30px;
}
#trouble_solution p.headline span {
	color:#00A0EA;
}

#trouble_solution ul.list01 {
	margin-bottom:80px;
}

#trouble_solution ul.list01 li {
	width:265px;
	height:280px;
	position:relative;
	float:left;
	margin-right:13px;
	margin-bottom:13px;
}

#trouble_solution ul.list01 li img {
	width:265px;
	height:280px;
	object-fit:cover;
	display:block;
	position:absolute;
	top:0;
	left:0;
}

#trouble_solution ul.list01 li .bg {
	width:235px;
	height:188px;
	background:rgba(255,255,255,0.9);
	position:absolute;
	top:46px;
	left:15px;
}
#trouble_solution ul.list01 li .bg p {
	font-size:18px;
	font-weight:500;
	letter-spacing:1px;
	display:block;
	padding:0 15px;
	position: absolute;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
}

#trouble_solution ul.list01 li:nth-child(4n) {
	margin-right:0;
}

#trouble_solution ul.list01 li:nth-child(4n+1) {
	clear:both;
}

#trouble_solution .guitar {
	width:650px;
	margin:0 auto 40px;
}

#trouble_solution .guitar img {
	margin-top:-20px;

}

p.soudan {
	clear:both;
	text-align:center;
	font-size:32px;
	letter-spacing:2px;
	color:#bdad9e;
	margin-bottom:25px;
}

.bass {
	border-radius:5px;
	box-shadow:#CCC 0 0 5px 3px;
	padding:50px 25px 20px 300px;
	background:url(../../about/images/trouble_solution_img02.jpg) no-repeat left 25px top 20px;
	margin-bottom:0;
	margin-top: 120px;
}

.bass p.arrow_box {
	padding:20px;
	margin-bottom:40px;
}

.bass ul {
	margin-bottom:20px;
}

.bass ul li {
	width:250px;
	height:150px;
	float:left;
	margin-right:12px;
	margin-bottom:30px;
}
.bass ul li:nth-child(3n) {
	margin-right:0;
}
.bass ul li:nth-child(4) {
	clear:both;
	width:100%;
	height:1.6em;
	font-size:14px;
	float:none;
	margin-bottom:10px;
}
.bass ul li:nth-child(n+5) {
	margin-bottom:0;
}

.bass ul li img {
	width:250px;
	height:150px;
	object-fit:cover;
}

/* 吹き出し */

.arrow_box{
    position:relative;
/*    width:100px;
    height:20px;*/
    background:#FFFFFF;
    padding:15px;
    border:1px solid #bdad9e;
    border-radius:5px;
}
.arrow_box:after,
.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:44%;
}
.arrow_box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:9px;
    border-right-width:9px;
    margin-top: -5px;
    border-right-color:#FFFFFF;
}
.arrow_box:before{
    border-color: rgba(229, 157, 19, 0);
    border-top-width:6px;
    border-bottom-width:6px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -6px;
    margin-right: 1px;
    border-right-color:#bdad9e;
}


#flow {
}

#flow h3 {
	font-size: 24px;
   /* font-family: source-han-serif-japanese, serif;*/
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    margin:0 auto 35px;
}

#flow h3 img {
	display:inline-block;
	margin-right:25px;
}

#flow .right {
	width:530px;
	margin-bottom:40px;
}

#flow .right p {
	line-height:1.8;
	font-weight:300;
	margin-bottom:30px;
}

#flow .left {
	width:520px;
	margin-bottom:40px;
}

#flow .left img {
	display:block;
}

#flow p.arrow {
	clear:both;
	text-align:center;
	margin:40px auto;
}

#flow .btn02 a {
	width:55%;
	font-size:16px;
}

p.ax_txt {
	width:980px;
	margin:0 auto 35px;
}

p.linkto {
	width:490px;
	margin:0 auto 15px;
}

body .consultation dl {
	width:980px;
	margin:0 auto;
}

body .consultation dl dt {
	font-size:18px;
	font-weight:600;
	margin-bottom:5px;
}

body .consultation dl dd {
	font-size:16px;
	font-weight:300;
	margin-bottom:30px;
}

.access_left {
	float:left;
}

.access_right {
	width:460px;
	float:right;
}

.access_right p.ax_txt {
	width:100%;
}

.access_right p.linkto {
	width:100%;
}

}



@media screen and (max-width:767px){
/*----------------------------------------------------------------------
SP Style
----------------------------------------------------------------------*/

/**********************************************************/
/* メインエリア */
/**********************************************************/


body main {
	font-size:15px;
}

main .box {
	width:100%;
}

main h1 {
	background-image:url(../../about/images/h1_bg.jpg);
	
}

.bass {
	border-radius:5px;
	box-shadow:#CCC 0 0 5px 3px;
	padding:100px 20px 20px 20px;
	background:url(../../about/images/trouble_solution_img02.jpg) no-repeat left 25px top 20px;
	margin-bottom:0;
}

.bass p.arrow_box {
	padding:20px;
	margin-bottom:40px;
}

.bass ul {
	margin-bottom:20px;
}

.bass ul li {
	width:49%;
	max-height:150px;
	float:left;
	margin-right:2%;
	margin-bottom:15px;
}
.bass ul li:nth-child(2n) {
	margin-right:0;
}
.bass ul li:nth-child(4) {
	clear:both;
	width:100%;
	font-size:14px;
	float:none;
	margin-bottom:10px;
}
.bass ul li:nth-child(n+5) {
	margin-bottom:0;
}

.bass ul li img {
	width:100%;
	max-height:150px;
	object-fit:cover;
}

/* 吹き出し */

.arrow_box{
    position:relative;
/*    width:100px;
    height:20px;*/
    background:#FFFFFF;
    padding:15px;
    border:1px solid #00A0EA;
    border-radius:5px;
	margin-left:50%;
}
.arrow_box:after,
.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:44%;
}
.arrow_box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:9px;
    border-right-width:9px;
    margin-top: -5px;
    border-right-color:#FFFFFF;
}
.arrow_box:before{
    border-color: rgba(229, 157, 19, 0);
    border-top-width:6px;
    border-bottom-width:6px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -6px;
    margin-right: 1px;
    border-right-color:#00A0EA;
}


#flow {
}

#flow h3 {
	font-size: 22px;
    /*font-family: source-han-serif-japanese, serif;*/
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", sans-serif;
    font-weight: 400;
    margin:0 auto 30px;
}

#flow h3 img {
	display:inline-block;
	margin-right:25px;
}

#flow .right {
	width:100%;
	margin-bottom:10px;
}

#flow .right p {
	line-height:1.6;
	font-weight:300;
	margin-bottom:15px;
}

#flow .left {
	width:100%;
	margin-bottom:30px;
}

#flow .left img {
	width:100%;
	display:block;
	margin:0 auto;
}

#flow p.arrow {
	clear:both;
	text-align:center;
	margin:40px auto;
}

#flow .btn02 a {
	width:100%;
	font-size:16px;
}

#flow p.soudan {
	clear:both;
	text-align:center;
	font-size:24px;
	letter-spacing:2px;
	color:#00A0EA;
	margin-bottom:25px;
}

#flow p.nayami {
	font-weight:300;
	text-align:center;
	line-height:2.0;
	margin-bottom:80px;
}

body .consultation {
	margin-top:60px;
	margin-bottom:40px;
}

p.ax_txt {
	width:100%;
	margin:0 auto 35px;
}

p.linkto {
	width:100%;
	margin:0 auto 15px;
}

body .consultation dl {
	width:100%;
	margin:0 auto;
}

body .consultation dl dt {
	font-size:18px;
	font-weight:600;
	margin-bottom:5px;
}

body .consultation dl dd {
	font-size:16px;
	font-weight:300;
	margin-bottom:30px;
}

.access_left {
	float:none;
	margin-bottom:30px;
}

.access_right {
	width:100%;
}

.access_right p.ax_txt {
	width:100%;
}

.access_right p.linkto {
	width:100%;
}

}