body {
    background-color: rgba(250,250,250,1.00);
    font-family: YakuHanJP , 'Noto Sans JP';
    box-sizing: border-box;
    color: #333333;
    }


.wap #works h1 {
    padding-top: calc(40 / 980 * 100%);
    padding-bottom: calc(16 / 980 * 100%);
}
#works .main1 {
    width: 100%;
}
#works .main1 .wap2 {
    width: calc(760 / 1180 * 100%);
    margin: 0 auto;
    max-width: 760px;
    text-align: justify;
}
.main1 .wap2 p {
    font-size: 0.813em;
    font-weight: 400;
    line-height: 2.154;
    text-align: justify;
    font-family: YakuHanJP , 'Noto Sans JP';
}

.main1 .wap2 h2 {
    font-size: 1.5em;
    font-weight: 500;
    text-align: left;
    color: #333333;
    margin-top: calc(37 / 760 * 100%);
}
.main1 .wap2 .h2p {
    margin-top: calc(29 / 760 * 100%);
     display: inline-block;
    width: 83%;
}
.h2pastyle {
    display: inline-block;
    vertical-align: top;
    margin-top: calc(0.5em + 29 / 760 * 100%);
    width: 16.425%;
    text-align: right;    
}
.h2pastyle img {
    width: calc(100 / 124.828 * 100%);
}
.main1 .wap2 .pp_sec {
    margin-top: calc(4 / 760 * 100%);
}
.wap #works .wap2 .pp_sec h1 {
    font-family: YakuHanJP , 'Noto Sans JP';
    font-size: 1em;
    font-weight: 700;
    text-align: left;
    color: #333333;
    line-height: 1em;
}

.wap #works .wap2 .pp_sec h1::after {
    content: "";
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
    /* padding-bottom: calc(4 / 980 * 100%); */
    border-bottom: 0em solid #ffe400;
}


.main1 .wap2 .ppText_r p {
    text-align: right;
    margin-right: 0;
    margin-left: auto; 
    line-height: 2;
    margin-top: calc((50 - 13) / 760 * 100%);
}
.main1 .wap2 .ppText_r p.mgt0 {
    margin-top: 0;
}

.main1 .wap2 .ppText_r {
    margin-bottom: calc((80 - 25) / 760 * 100%);
}
.main1 .wap2 .ppText_r p:nth-of-type(2),
.main1 .wap2 .ppText_r p:nth-of-type(3) {
    margin-top: calc(26 / 760 * 100%);
}
table {
    box-sizing: border-box;
    border: 1px solid #dddddd;
    font-size: 0.81em;
    margin-bottom: calc(13 / 760 * 100%);
}


tbody th{
  box-sizing: border-box;
    border: 1px solid #dddddd;
    background-color:  #eeeeee;
    width: 29.868%;
    padding: calc(20 / 760 * 100%);
    
}
tbody tr td {
  box-sizing: border-box;
    border: 1px solid #dddddd;
    padding: calc(20 / 760 * 100%);
    line-height: 2em;
    width: 70%;

}
tbody tr td:first-of-type {
    width: 29.868%;
    max-width: 227px;
    font-weight: 700;
}
div.connectionboxwap {
    box-sizing: border-box;
    border: 1px solid #dddddd;
    border-bottom-width: 0;
    border-right-width: 0;
    font-size: 0.81em;
    margin-bottom: calc(13 / 760 * 100%);
    width: max-content;
}


div.connectionboxwap .hd {
  box-sizing: border-box;
    background-color:  #eeeeee;
    font-weight: 700;
    /*padding: calc(20 / 760 * 100%);*/
    
}
div.connectionboxwap div {
  box-sizing: border-box;
    border: 1px solid #dddddd;
    border-top-width: 0;
    border-left-width: 0;
    padding: calc(20 / 760 * 0.1 * 100vw);
    line-height: 2em;
    width: max-content;

}
div.connectionboxwap .ta {
    width: 100%;
    font-weight: 700;
}



.main1 .wap2 .ppText_r .bold,
td span.bold,div.connectionboxwap span.bold
{
    font-weight: 700;
}
.wap2 .pp_sec p a:hover,
td a:hover
{
    border-bottom: 1px solid #333333;

}
.wap2 .pp_sec:last-child
{
    margin-bottom: calc(100 / 760 * 100%);

}

.wap2 .pp_sec p.mgtp
{
    margin-top: calc(17 / 760 * 100%);
}
.datebox {
    display: grid;
    list-style: none;
    grid-template-columns: max-content 1fr;
}
.datebox li:nth-of-type(1) {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
.datebox li:nth-of-type(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.datebox li:nth-of-type(3) {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
.datebox li:nth-of-type(4) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.datebox li:nth-of-type(5) {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}
.datebox li:nth-of-type(6) {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}

.connectionboxwap {
    display: grid;
    grid-template-columns: max-content;
}

.connectionboxwap .hd:nth-of-type(1) {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
.connectionboxwap .hd:nth-of-type(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    width: auto;
}
.connectionboxwap .ta {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
.connectionboxwap .date {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.connectionbox {
    display: grid;
    list-style: none;
    grid-template-columns: max-content 1fr;
}
.connectionbox li{
    width: max-content;
}
.connectionbox li:nth-of-type(even)::before {
    content: "：";
    width: min-content;
    font-weight: 700;
}


.connectionbox li:nth-of-type(1) {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
.connectionbox li:nth-of-type(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.connectionbox li:nth-of-type(3) {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
.connectionbox li:nth-of-type(4) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.connectionbox li:nth-of-type(5) {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}
.connectionbox li:nth-of-type(6) {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}


@media (max-width:768px){
    .wap #works h1 {
font-size: calc(50 / 750 * 100vw);
    padding-top: calc(50 / 750 * 100vw);
    padding-bottom: calc(20 / 750 * 100vw);
}
    .wap .home02 h1::after {
        border-bottom-width: 0.1em;        
    }
    
#works .main1 .wap2 {
    width: calc(670 / 750 * 100vw);
    max-width: 670px;
}
    
    .main1 .wap2 h2 {
    font-size: calc(38 / 750 * 100vw);
    margin-top: calc(62 / 750 * 100vw);
}
    .main1 .wap2 .h2wap {
        display: flex;
        justify-content: space-between;
}
.main1 .wap2 .h2p {
    margin-top: calc(22 / 750 * 100vw);
    width: calc(520 / 750 * 100vw);
}
.h2pastyle {
    margin-top: calc(0.5em + 22 / 750 * 100vw);
    width: calc(120 / 750 * 100vw);
    margin-left: calc(26.45 / 750 * 100vw);
    
}
.h2pastyle img {
    width: calc(120 / 750 * 100vw);
}
.main1 .wap2 p {
    font-size: calc(22 / 750 * 100vw);
    line-height: calc(40 / 750 * 100vw);

}   
.main1 .wap2 .pp_sec {
    margin-top: calc(20 / 750 * 100vw);
}
.wap #works .wap2 .pp_sec h1 {
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.571em;
}

.main1 .wap2 .ppText_r {
    margin-bottom: calc(90 / 750 * 100vw);
}
.main1 .wap2 .ppText_r p {
    line-height: calc(40 / 750 * 100vw);
    margin-top: calc((80 - 22) / 750 * 100vw);
} 
.main1 .wap2 .ppText_r p:nth-of-type(2),
.main1 .wap2 .ppText_r p:nth-of-type(3) {
    margin-top: calc(44 / 750 * 100vw);
}

.connectionbox {
    display: flex;
    flex-direction: column;
}
div.connectionboxwap {
    font-size: calc(22 / 750 * 100vw);
    margin-bottom: calc(30 / 750 * 100vw);
}
div.connectionboxwap .hd{
    padding: calc(30 / 750 * 100vw);
    
}
div.connectionboxwap .date {
    padding: calc(30 / 750 * 100vw);
    line-height: calc(40 / 750 * 100vw);
    width: max-content;
}
div.connectionboxwap .ta {
    padding: calc(30 / 750 * 100vw);
} 

table {
    font-size: calc(22 / 750 * 100vw);
    margin-bottom: calc(30 / 750 * 100vw);
}
tbody th{
    padding: calc(30 / 750 * 100vw);
    
}
tbody tr td {
    padding: calc(30 / 750 * 100vw);
    line-height: calc(40 / 750 * 100vw);
    width: 62.687%;
}
tbody tr td:first-of-type {
    width: 37.313%;
} 
.connectionbox li:nth-of-type(even)::before {
    content: "";
    width: 0;
}
.connectionbox li:nth-of-type(odd):after {
    content: "：";
    width: min-content;
    font-weight: 700;
}


.wap2 .pp_sec p.mgtp
{
    margin-top: calc(38 / 750 * 100vw);
}

}
