@charset "UTF-8";

/* font ---------------------------------------
Noto Sans Japanese：font-family: "Noto Sans Japanese";
さわらびゴシック：font-family: "Sawarabi Gothic";
 ---------------------------------------*/
/* TOP画像 ------------------------- */
#wrapper #contents > .img span {
    top: 10%;
    left: 6%;
}
#wrapper #contents > .img span:last-of-type {
    top: 22%;
    left: 10%;
}
 
/* コンテンツ ------------------------- */
/*プライマリーウォーキングとは？*/
#cntWrapper .prymary #what .grid {
    display: grid;
    grid-template-columns: [col-one] 575px [col-two] 5px [col-three] 240px;
    grid-template-rows: [gTitle] auto [gText] auto [gList] auto [gPhoto] auto [gPhoto-end] auto;
    margin: 35px 0px 20px 0px;
    display: -ms-grid;
    -ms-grid-columns: 575px 5px 240px;
    -ms-grid-rows: 50px auto auto auto auto;
}
#cntWrapper .prymary #what .gTitle {
    grid-column: col-one /col-two;
    grid-row: gTitle /gText;
    color: #1e5799;
    font-size: 25px;
    margin-bottom: 10px;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}
#cntWrapper .prymary #what .gText {
    grid-column: col-one /col-two;
    grid-row: gText /gList;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}
#cntWrapper .prymary #what .gList {
    grid-column: col-one /col-two;
    grid-row: gList /gPhoto;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.25px;
    margin: 15px 0px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
}

#cntWrapper .prymary #what .gPhoto {
    grid-column: col-tow /col-three;
    grid-row: gTitle /gPhoto-end;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
}
	#cntWrapper .prymary #what .gPhoto img {
		max-width: 241px;
		width: 100%;
	}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#cntWrapper .prymary #what .gPhoto:not(:target) {
    margin-left: 5px;
	}
	#cntWrapper .prymary #what .gPhoto img {
		width: auto;
	}
}


#cntWrapper .prymary #what ul li{line-height: 225%;}
#cntWrapper .prymary #what ul li:after {
    content:"";
    display:block;
    border-top: 1px dashed #000;
}
#cntWrapper .prymary #what ul li:first-of-type {
    border-top: 1px dashed #000;
}
#cntWrapper .prymary #what ul li:last-of-type {
    font-size: 20px;
    color: #1e5799;
}
#cntWrapper .prymary #what ul li:last-of-type:after {
	border: none;
}
#cntWrapper .prymary #what .flex > p {
    margin-left: 10px;
    width: 50%;
    margin: 0px auto 50px auto;
    text-align: right;
}

#cntWrapper .prymary #what .chart {
	position: relative;
	background: #fff2f2;
	text-align: center;
	padding: 20px 0px 110px 0px;
}
#cntWrapper .prymary #what .chart img[usemap] {
		border: none;
		height: auto;
		max-width: 100%;
		width: auto;
	}
#cntWrapper .prymary #what .chart map area {
    pointer-events: none;
}
#cntWrapper .prymary #what .chart p {
    position: absolute;
    bottom: 1%;
    width: 100%;
    text-align: center;
}
#cntWrapper .prymary #what .chart p.mq {
    display: none;
}
#cntWrapper .prymary #what .chart .dsc {
    width: 250px;
    text-align: left;
    border-radius: 20px;
    line-height: 1.6em;
    padding: 15px;
    opacity: 0.9;
    border: 4px solid #FFF;
    /* display: none; */
}
#cntWrapper .prymary #what .chart #medical.dsc {
    width: 330px;
    background: #9ee2ff;
    top: 20px;
    left: 10px;
}
#cntWrapper .prymary #what .chart #interlock.dsc {
	width: 250px;
	top: 200px;
	left: 30px;
	background: #93f117;
}
#cntWrapper .prymary #what .chart #beauty.dsc {
    top: 200px;
    left: initial;
    right: 20px;
    width: 360px;
    background: #ffb8b8;
}
#cntWrapper .prymary #what .chart .dsc:before,#what .chart .dsc:after {
    content: "";
    border-width: 25px 25px 25px 25px;
    border-style: solid;
    display: block;
    position: absolute;
}
#cntWrapper .prymary #what .chart .dsc:before {
    border-color: transparent transparent transparent #fff;
}
#cntWrapper .prymary #what .chart .dsc:after {
    border-color: transparent transparent transparent #000;
}

#cntWrapper .prymary #what .chart #medical.dsc:before {
    right: -45px;
    top: 58px;
    border-color: transparent transparent transparent #fff;
    border-width: 28px 0px 28px 45px;
}
#cntWrapper .prymary #what .chart #medical.dsc:after {
    right: -41px;
    top: 56px;
    border-color: transparent transparent transparent #9ee2ff;
    border-width: 30px 0px 30px 54px;
}

#cntWrapper .prymary #what .chart #interlock.dsc:before {
    right: 47px;
    bottom: -40px;
    border-color: #fff transparent transparent transparent;
    border-width: 40px 23px 0px 23px;
}
#cntWrapper .prymary #what .chart #interlock.dsc:after {
    right: 50px;
    bottom: -35px;
    border-color: #93f117 transparent transparent transparent;
    border-width: 35px 20px 0px 20px;
}
#cntWrapper .prymary #what .chart #beauty.dsc:before {
    left: 147px;
    bottom: -40px;
    border-color: #fff transparent transparent transparent;
    border-width: 40px 23px 0px 23px;
}
#cntWrapper .prymary #what .chart #beauty.dsc:after {
    left: 150px;
    bottom: -35px;
    border-color: #ffb8b8 transparent transparent transparent;
    border-width: 35px 20px 0px 20px;

}



/*タイトル*/
/*青の小見出し*/
#cntWrapper .prymary .inSpan span {
    background: #008adc;
}

/*体験談. モデル*/
#cntWrapper .prymary #impressions p {
    display: flex;
    justify-content: space-between;
    width: 820px;

    margin: 20px 0 0px auto;
}

/*ヒューゴ・グスターボ・コダーロ*/
#cntWrapper .prymary #hugo .inSpan.titleBg i {
    font-size: 12px;
    font-style: normal;
    font-family: "Noto Sans Japanese";
    letter-spacing: 0.05em;
}
#cntWrapper .prymary #hugo {
    margin-bottom: 60px;
}
#cntWrapper .prymary #hugo .leftMargin .text {
    margin-top: 35px;
}
#cntWrapper .prymary #hugo .text > * {
    display: inline-block;
    vertical-align: top;
}
#cntWrapper .prymary #hugo .text p {
    width: 240px;
    margin-right: 15px;
}
#cntWrapper .prymary #hugo .text p img {
    width: 100%;
}
#cntWrapper .prymary #hugo .text dl {
    width: 67%;
}
#cntWrapper .prymary #hugo .text dt {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}
#cntWrapper .prymary #hugo .text dt span {
    display: block;
    font-size: 15px;
}
#cntWrapper .prymary #hugo .text .pre {
    font-size: 12px;
}




/* 医者　*/
#cntWrapper .prymary #alliance .doctoer {
    padding: 0 0 40px 0;
    border-bottom: 1px solid #018adb;
    margin: 0px 0 50px 0;
}
#cntWrapper .prymary #alliance .doctoer:last-of-type {
	border: none;
}
#cntWrapper .prymary #alliance .doctoer > p {
    margin-right: 25px;
}
#cntWrapper .prymary #alliance .doctoer li.specialty {
    border: 1px solid #00579e;
    background: #fffdf4;
}
#cntWrapper .prymary #alliance .doctoer li.specialty p {
    width: 90%;
    margin: 10px auto;
    line-height: 1.2em
}
#cntWrapper .prymary #alliance .doctoer li.specialty span {
    font-family: 'Noto Sans Japanese-midiam';
    background: #00579e;
    color: #fff;
    font-size: 15px;
    width: 150px;
    display: inline-block;
    text-align: center;
    padding: 2px 0px;
}
#cntWrapper .prymary #alliance .doctoer li.hospital {
    font-size: 22px;
    font-weight: bold;
    margin: 15px 0px;
}

#cntWrapper .prymary #alliance .doctoer li.link {
    margin-top: 10px;
}
#cntWrapper .prymary #alliance .doctoer li.link p {
    width: 100%;
    margin: 5px 0 0 0;
}
#cntWrapper .prymary #alliance .doctoer li.link a {
   /* font-family: 'Noto Sans Japanese-midiam'; */
   font-size: 19px;
   color: #1e5799;
   font-weight: bold;
}



/* 下部リンク */
#cntWrapper .prymary #guide {
    border-top: 15px solid #00569d;
    background: #f2f1e2;
    text-align: center;
    padding: 20px 15px;
}

#cntWrapper .prymary #guide dl dd {
    background: #fff;
    border: 1px solid #cfcfcf;
    width: 280px;
    padding: 10px 0;
}

#cntWrapper .prymary #guide dl.about dd {
    display: inline-block;
}

#cntWrapper .prymary #guide dl dd p {
	border-radius: 5px;
	background: #188bcf; /* Old browsers */
	background: -moz-linear-gradient(top, #188bcf 1%, #00579e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #188bcf 1%,#00579e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #188bcf 1%,#00579e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	width: 210px;
	padding: 7px 0;
	margin: 10px auto 0px auto;
	transition: all 0.2s linear;
}
#cntWrapper .prymary #guide dl dd p:hover {
    background: #ddd;
}
#cntWrapper .prymary #guide dl dd p a {
	display: block;
	color: #fff;
	font-family: "Noto Sans Japanese";
	background: url("../images/icon.png") no-repeat 98% 50%;
}
#cntWrapper .prymary #guide dl dt {
    margin-bottom: 10px;
}






@media screen and (max-width: 1200px) {
	#cntWrapper .prymary #what .grid {
		grid-template-columns: [col-one] 69% [col-two] 1% [col-three] 30%;
		grid-template-rows: [gTitle] auto [gText] auto [gList] auto [gPhoto] auto [gPhoto-end] auto;
		margin: 35px 0px 20px 0px;
		display: -ms-grid;
		-ms-grid-columns: 69% 1% 30%;
		-ms-grid-rows: 50px auto auto auto auto;
	}

	#cntWrapper .prymary #what .gTitle {
		grid-column: col-one /col-three;
	}

	#cntWrapper .prymary #what .gPhoto {
			grid-row: gText /gPhoto-end;
			-ms-grid-row: 2;
			-ms-grid-row-span: 2;
	}
	#cntWrapper article #what .flex > p {
		width: 60%;
	}
	#cntWrapper article #what .flex > p img {
		width: 100%;
	}
	#cntWrapper .prymary #what .gList {
		margin: 15px 0px;
		font-size: 15px;
	}

/*体験談. モデル*/	
	#cntWrapper .prymary #impressions p {
		display: block;
		width: 100%;
		text-align: center;
	}
	#cntWrapper .prymary #impressions p img {
		margin-bottom: 10px;
	}


/*ヒューゴ・グスターボ・コダーロ*/
	#cntWrapper .prymary #hugo .inSpan.titleBg i {
		display: block;
		margin-top: -9px;
	}
	#cntWrapper .prymary #hugo .leftMargin .text p {
		margin-right: 7px;
		width: 30%;
	}

/* 下部リンク */
	#cntWrapper .prymary #guide {
		display: block;
	}
	#cntWrapper .prymary #guide .about {
		margin-bottom: 20px;
	}
	#cntWrapper .prymary #guide .contact dd {
		margin: 0px auto;
		/* width: 280px; */
	}
	#cntWrapper .prymary #guide .about dd {
		display: inline-block;
		width: 49%;
	}
}

@media screen and (max-width: 900px) {
#cntWrapper .prymary #what .gTitle {
    grid-column: col-one /col-fore;
    -ms-grid-column-span: 3;
}
#cntWrapper .prymary #what .gText {
    grid-column: col-one /col-fore;
    -ms-grid-column-span: 3;
}
	#cntWrapper .prymary #what .gPhoto {
		grid-row: gList /gPhoto-end;
		-ms-grid-row: 3;
	}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width: 900px) {
	#cntWrapper .prymary #what .gPhoto img:not(:target) {
    width: 160px;
	}
}


@media screen and (max-width: 768px) {

	#cntWrapper .prymary #what .grid {
		grid-template-columns: [col-one] 65% [col-two] 10px  [col-three];
	}

	#cntWrapper .prymary #what .gTitle {
		grid-column: col-one / col-for;
	}

	#cntWrapper .prymary #what .gText {
		grid-column: col-one / col-for;
	}

	#cntWrapper .prymary #what .gPhoto {
		grid-row: gList / gPhoto-end;
	}
	#cntWrapper .prymary #what .gPhoto img {
		width: 100%;
	}

	#cntWrapper .prymary #what ul li:nth-of-type(3){
		line-height: 1.5em;
	}
	#cntWrapper .prymary #what ul li:after {
		margin-top: 3px;
	}
	#cntWrapper .prymary #what ul li {
		padding: 0px 0px 8px 0px;
	}
	#cntWrapper .prymary #what .chart p {
		display: none;
	}
	#cntWrapper .prymary #what .chart p.mq {
		display: block;
	}

	#cntWrapper .prymary #what .chart #medical.dsc {
		top: -46px;
		left: 20px;
		width: 480px;
	}
	#cntWrapper .prymary #what .chart #medical.dsc:before {
		border-color: #fff transparent transparent transparent;
		border-width: 26px 22px 0px 22px;
		top: initial;
		bottom: -29px;
		right: 44%;
	}
	#cntWrapper .prymary #what .chart .dsc:before {
		border-color: #fff transparent transparent transparent;
	}
	#cntWrapper .prymary #what .chart #medical.dsc:after {
		border-color: #9ee2ff transparent transparent transparent;
		border-width: 26px 22px 0px 22px;
		top: initial;
		bottom: -22px;
		right: 44%;
	}

	#cntWrapper .prymary #what .chart #interlock.dsc {
		width: 283px;
		top: 230px;
		left: 3px;
	}
	#cntWrapper .prymary #what .chart #interlock.dsc:before {
		right: inherit;
		left: 51px;
		bottom: -30px;
		border-width: 26px 22px 0px 22px;
	}
	#cntWrapper .prymary #what .chart #interlock.dsc:after {
		right: initial;
		left: 53px;
		bottom: -25px;
		border-width: 26px 20px 0px 20px;
	}

	#cntWrapper .prymary #what .chart #beauty.dsc {
		width: 400px;
		top: 212px;
	}

	#cntWrapper .prymary #what .chart #beauty.dsc:before {
		border-width: 26px 22px 0px 23px;
		bottom: -30px;
		right: 53px;
		left: initial;
	}

	#cntWrapper .prymary #what .chart #beauty.dsc:after {
		border-width: 26px 20px 0px 20px;
		bottom: -25px;
		right: 55px;
		left: initial;
	}





}


@media screen and (max-width: 480px) { /*smartphone*/
	#cntWrapper .prymary #what .gTitle {
		font-size: 20px;
	}

	#cntWrapper .prymary #what .gText {
		grid-column: col-one / col-two;
	}

	#cntWrapper .prymary #what .gPhoto {
		grid-row: gText / gList;
	}

	#cntWrapper .prymary #what .gList {
		grid-column: col-one / col-fore;
	}

	#cntWrapper .prymary #what ul li:last-of-type {
		font-size: 18px;
		line-height: 25px;
	}


	#cntWrapper article #what .flex > p {
		width: 100%;
	}
	#cntWrapper .prymary #what .flex {
		display: block;
	}

/*　チャート　*/
	#cntWrapper .prymary #what .chart p.mq img {
		width: 95%;
		max-width: 378px;
	}
	#cntWrapper .prymary #what .chart #medical.dsc,
	#cntWrapper .prymary #what .chart #interlock.dsc,
	#cntWrapper .prymary #what .chart #beauty.dsc {
		width: 95%;
		left: 2.5%;
		box-sizing: border-box;
		top: -25%;
		padding: 10px;
	}
	#cntWrapper .prymary #what .chart #interlock.dsc,
	#cntWrapper .prymary #what .chart #beauty.dsc {
		top: initial;
		bottom: 11%;
	}
	#cntWrapper .prymary #what .chart #beauty.dsc {
		bottom: 2%;
	}
	#cntWrapper .prymary #what .chart #interlock.dsc:before,
	#cntWrapper .prymary #what .chart #beauty.dsc:before {
		border-color: transparent transparent #fff transparent;
		border-width: 0px 20px 30px 20px;
		bottom: initial;
		top: -33px;
		left: 30px;
	}
	#cntWrapper .prymary #what .chart #interlock.dsc:after,
	#cntWrapper .prymary #what .chart #beauty.dsc:after {
		border-color: transparent transparent #93f117 transparent;
		border-width: 0px 20px 30px 20px;
		bottom: initial;
		top: -27px;
		left: 30px;
	}
	#cntWrapper .prymary #what .chart #beauty.dsc:before,
	#cntWrapper .prymary #what .chart #beauty.dsc:after {
		border-color: transparent transparent #ffb8b8 transparent;
		right: 32px;
		left: initial;
	}

	/*体験談*/
	#cntWrapper .prymary #impressions p img {
		width: 100%;
		max-width: 388px;
	}


	/*ヒューゴ・グスターボ・コダーロ*/
	#cntWrapper .prymary #hugo .text > * {
		display: block;
	}
	#cntWrapper .prymary #hugo .text dl {
		width: 100%;
	}

	#cntWrapper .prymary #hugo .leftMargin .text p {
		margin: 0px auto;
		width: 40%;
	}
	#cntWrapper .prymary #hugo .leftMargin .text {
		border: 1px solid #00569c;
		padding: 17px;
		border-top: 5px solid #00569c;
	}


	/* 医者　*/
	#cntWrapper .prymary #alliance .doctoer {
		display: block;
	}

	#cntWrapper .prymary #alliance .doctoer > p {
		text-align: center;
		margin: 0 0 10px 0;
	}
	#cntWrapper .prymary #alliance .doctoer li.hospital {
		font-size: 15px;
		letter-spacing: 0.07em;
	}

	#cntWrapper .prymary #alliance .doctoer li.link a {
		font-size: 17px;
		letter-spacing: 0;
		margin: 0;
	}

	#cntWrapper .prymary #alliance .doctoer li.link p {
		margin: 0;
	}



	/* 下部リンク */
	#cntWrapper .prymary #guide .about dd {
		width: 280px;
		margin-bottom: 10px;
	}
}