@charset "UTF-8";
html {
-webkit-text-size-adjust: 100%;
}

body {
display: none;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

/* 以下『works』専用 */

#portfolio_wrap {
width: 1100px;
margin-right: auto;
margin-left : auto;
margin-bottom: 25px;
text-align: center;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 1100px;
width: 100%;
height: auto;}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 1100px;
width: 100%;
height: auto;}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 680px;
width: 100%;
height: auto;}
}

.space-title {
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{ 
margin-bottom: 100px;}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
margin-bottom: 80px;}
@media screen and (max-width: 720px) /*ウィンドウ幅が最大720pxまでの場合に適用*/
{
margin-bottom: 50px;}
}/*OK*/

.title_bl {
max-width: 1100px;
align-items: center;
margin-right: auto;
margin-left : auto;
margin-top: 50px;
margin-bottom: 20px;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
width: 100%;
height: auto;
.title_pc {display: block !important; }
.title_sp {display: none !important; }
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 720px;
width: 100%;
height: auto;
.title_pc {display: block !important; }
.title_sp {display: none !important; }
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 720px;
width: 100%;
height: auto;
.title_pc {display: none !important; }
.title_sp {display: block !important; }
}
}
	
.title_img{
img {
width: auto;
max-width: 100%;
height: auto;}
}

.portfolio_contents {
display : block;
Width:1100px;
justify-content: center;
margin-right: auto;
margin-left : auto;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 1100px;
width: 100%;
height: auto;
margin-bottom: 30px;
.img_pc {display: block !important; }
.img_sp {display: none !important; }
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 960px;
width: 80%;
height: auto;
margin-bottom: 10px;
.img_pc {display: block !important; }
.img_sp {display: none !important; }
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 700px;
width: 80%;
height: auto;
margin-bottom: 0px;
.img_pc {display: none !important; }
.img_sp {display: block !important; }
}
}

.portfolio_img {
img {
width: auto;
max-width: 100%;
height: auto;
}
}


.portfolio_catch-group {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}/*OK*/


.portfolio_catch {
display: inline-block;
text-align : center;
font-family: "游明朝", "YuMincho", "ヒラギノ明朝", "Hiragino Mincho", "HG明朝", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: normal;
color: #333333;
font-size: 18pt;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
@media screen and (max-width: 1074px)/*ウィンドウ幅が最大1074pxまでの場合に適用*/
{
max-width: 100%;
width: 90vw;
}
}/*OK*/

.portfolio_line-group {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}/*OK*/


.portfolio_line-bl {
align-items: center;
margin-left: auto;
margin-right: auto;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 1100px;
width: 100%;
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 960px;
width: 100%;
}
@media screen and (max-width: 1074px)/*ウィンドウ幅が最大1074pxまでの場合に適用*/
{
max-width: 850px;
width: 90%;
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 100%;
width: 80vw;
}
}


.portfolio_line{
border-bottom: 1px solid;
border-bottom-color: lightgray;
}/*OK*/


.portfolio_explanation-group {
display: flex;
max-width: 500px;
margin : 0 auto;
justify-content: space-between;
}/*OK*/

.portfolio_explanation {
display: flex;
flex-wrap: wrap;
margin-right: auto;
margin-left : auto;
justify-content: space-between;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 500px;
width: 90vw;
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 500px;
width: 90vw;
}
@media screen and (max-width: 1074px)/*ウィンドウ幅が最大1074pxまでの場合に適用*/
{
max-width: 480px;
width: 90vw;
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 100%;
width: 90vw;
}
}

.portfolio_text {
display: flex;
text-align : left;
Width: 500px;
justify-content: left;
margin-right: auto;
margin-left : auto;
font-family: "游明朝", "YuMincho", "ヒラギノ明朝", "Hiragino Mincho", "HG明朝", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 12pt;
line-height: 20pt;
color: #4b4b4b;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 500px;
width: 100%;
height: auto;
margin-top: 40px;
margin-bottom: 40px;
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 500px;
width: 100%;
height: auto;
margin-top: 30px;
margin-bottom: 30px;
font-size: 11pt;
}
@media screen and (max-width: 1074px)/*ウィンドウ幅が最大1074pxまでの場合に適用*/
{
max-width: 480px;
width: 90%;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
font-size: 11pt;
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 100%;
width: 80vw;
height: auto;
margin-bottom: 20px;
font-size: 9pt;
}
}

.portfolio_text_s {
display: flex;
text-align : left;
Width: 500px;
justify-content: left;
margin-right: auto;
margin-left : auto;
font-size: 9pt;
line-height: 70%;
color: #4b4b4b;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 500px;
width: 100%;
height: auto;
margin-top: 40px;
margin-bottom: 40px;
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 500px;
width: 100%;
height: auto;
margin-top: 30px;
margin-bottom: 30px;
font-size: 9pt;
}
@media screen and (max-width: 1074px)/*ウィンドウ幅が最大1074pxまでの場合に適用*/
{
max-width: 480px;
width: 90%;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
font-size: 9pt;
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 100%;
width: 80vw;
height: auto;
margin-bottom: 20px;
font-size: 7pt;
}
}

.space-portfolio {
margin-top: 50px;
}/*OK*/

.portfolio_container-group{
max-width: 680px;
max-height: auto;
align-items: center;
margin-right: auto;
margin-left : auto;
@media screen and (min-width: 1310px)/*ウィンドウ幅が1310px以上の場合に適用*/
{
max-width: 960px;
width: 100%;
height: auto;
}
@media screen and (max-width: 1309px)/*ウィンドウ幅が最大1309pxまでの場合に適用*/
{
max-width: 960px;
width: 100%;
height: auto;
}
@media screen and (max-width: 1074px)/*ウィンドウ幅が最大1074pxまでの場合に適用*/
{
max-width: 575px;
width: 90%;
height: auto;
}
@media screen and (max-width: 720px)/*ウィンドウ幅が最大720pxまでの場合に適用*/
{
max-width: 100%;
width: 80vw;
height: auto;
}
}

.portfolio_container-bl{
display:flex;
flex-wrap: wrap;
justify-content: center;
}

.portfolio_container{
text-align:center;
margin:0;
}

.prev_next-group {
display: flex;
max-width: 300px;
justify-content:space-around; 
align-items: center;
margin-right: auto;
margin-left : auto;
margin-top: 50px;
margin-bottom: 20px;
font-size: 12pt;
color: #4b4b4b;
}
	
.prev_next{
img {
width: auto;
max-width: 100%;
height: auto;
}
}