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

html,body,#container {height: 100%;}
body {
	margin: 0px;
	padding: 0px;
	color: #666;	/*全体の文字色*/
	font-family: "Noto Serif JP", serif;
    font-weight: 500;
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
    width: 100%;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;		/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}
a:hover {
	color: #DE2900;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*共通部分ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#main-item {
    width: 99%;
    margin: auto;
    background-color: #fff;
   
}


.top-infor table tr td p {
    text-align: center
}

.top-infor span {
    color: #FF6666
}


/*イベント情報ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


.festa {
    width: 100%;
    margin-bottom: 2em
}


.festa .table-title {
    background-color: #000066;
    color: #fff;
    font-weight: bold;
    padding-left: 1.5em;
    width: 95%;
    margin: auto
}

.festa table {
    width: 100%;
}

.festa table td {
   width: 70%;
    font-weight: bold;
    color: #000066
}

.festa table th {
    width: 30% ;
    text-align: right;
    color: #666666;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
     padding-top: 0.5em;
}

.festa map {
    display: block;
    width: 90%;
    margin: auto;
}


/*新着情報ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.news {
    border: solid 1px;
    padding: 0.5em 1em;
    font-size: 14px;
    margin: 1.5em;
    
}

.news table {
    width: 100%;
}

.news table td {
    height: 2em
}
.news table td span {
    color: #Ff6666
}

.news table td p {
    padding-left: 1.5em
}

.news h4 {
    text-align: right
}




/*ーーオンドアール紹介ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.miz-title {
    width: 100%
}

.miz-title table {
    width: 98%;
    margin: auto;;
    text-align: center;
    background-color: #0066CC;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff
}

.miz-title2 {
    width: 100%;
     
}
.miz-title2 h4 {
   color: #FF6600;
    font-weight: bold;
    width: 100%;
    font-size: 1.1em;
    text-align: center
}

.miz-title2 h5 {
    color: #0066CC;
    font-size: 1.1em;
    font-weight: bold;
    padding-left: 2.5em;
    padding-right: 2.5em
}

.miz-title2 h5 span{
    color: #ff6600;
    padding-right: 0.5em
}

.miz-intro {
    width: 100%
}

.miz-intro table {
    width: 90%;
    margin: auto
}

.miz-intro table tr {
}

.miz-intro table tr th{
    background-color: #E9EBFA;
    text-align: left;
    padding-left: 1em;
    width: 100%
}

.miz-intro table tr td {
    padding: 1.5em;
    
}

.miz-intro table tr td figure {
    float: right
}


.miz-intro table tr td  figure img{
    margin: 1em;
}


/*----------*/

.miz-img {
    width: 90%;
    margin: auto;
}

.miz-img h4 {
    width: 100%;
    margin: auto;
    background-color: #FFFF99;
    font-weight: bold;
    text-align: center
}

.miz-img list ul {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    padding-top: 0.5em;
    
}

.miz-img list ul li {
    width: 32%
}

.miz-img list ul li img {
    width: 100%
}

/*----------*/

.miz-senkou {
    width: 90%;
    margin: auto;
   
}

.miz-senkou h4 {
    width: 100%;
    margin: auto;
    background-color: #FFFF99;
    font-weight: bold;
    text-align: center
}

.miz-senkou table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    margin-top: 0.5em
}
.miz-senkou table tr {
    width: 100%;
    display: flex;
    border-bottom: solid 1px
}


.miz-senkou table tr td {
    width: 45%;
    
}
.miz-senkou table tr td p {
    text-align: left
}



/*オンドアール募集2020ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.boshu-title {
    width: 90%;
    margin: auto;
}

.boshu-title img {
    width: 100%;
}

.boshu-title h5 {
    font-weight: bold;
    font-size: 1.1em;
    color: #0066CC
}

.boshu-title p {
    padding: 1em
}
/*----------*/

.boshu-youkou {
    width: 90%;
    margin: auto
}

.boshu-youkou table {
    border-collapse: collapse;
}

.boshu-youkou table tr {
    border-bottom: solid 1px;
    
}

.boshu-youkou table th {
    width: 30%;
    padding-top: 0.5em;
    padding-bottom: 0.5em
}

.boshu-youkou table td {
    padding-top: 0.5em;
    padding-bottom: 0.5em
}

.boshu-youkou h4 {
    font-weight: bold;
    font-size: 1.1em;
    color: #0066CC
}

.boshu-youkou p {
    padding: 1em
}

/*これまでのオンドアールーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.kako-miz {
    position: relative;
    display: block;
    width: 90%;
    margin: auto;
    height: 100%;
    overflow: auto
}

.kako-miz h4 {
   width: 100%;
    text-align: center;
    background-color: #0066CC;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em
}
.kako-miz h4 span {
    color: #FF6600
}

.kako-miz list {
    width: 100%
}



.kako-miz list ul li {
    width: 33%;
    float: left;
   background-color: #FFFFFF;
    text-align: center;
  
}

.kako-miz list ul li img {
    width: 90%;
    margin: auto;
}

.kako-miz list ul li p {
    font-size: 0.8em;
    width: 90%;
    margin: auto;
    padding-bottom: 1.5em
    
}

.kako-miz a {
    text-decoration: none
}


/*マンスリーレポートーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.report {
    width: 90%;
    margin: auto
}

.report h4 {
    font-size: 0.8em
}

.report h5 {
    font-weight: bold;
    font-size: 1.1em;
    color: #0066CC
}

.report p {
    padding: 1em
}

.report figure {
    width: 80%;
    margin: auto
}

.report figure img {
    width: 100%
}


/*情報保護ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.hogo {
    width: 90%;
    margin: auto;
    height: 100vh
}

.hogo p {
    padding: 1em
}

.hogo h3 {
    text-align: right
}


/*パールエッセイーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.essay {
    width: 90%;
    margin: auto
}

.essay h4 {
    font-weight: bold;
    
}

.essay h4 span {
    color: #FF6666
}

.essay p {
    padding: 1em;
    line-height: 2.5em
}

.essay p2 {
    font-size: 0.9em;
    line-height: 2.5em;
    margin-left: 1em
}


/*エッセイ本文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.essay-title {
    width: 90%;
    margin: auto
}

.essay-title h3 {
    font-size: 0.85em
}

.essay-title h4 {
    font-weight: bold
}

.essay-main {
    width: 85%;
    margin: auto;
    padding-top: 1.5em;
    padding-bottom: 2em
}

.essay-main p {
    font-size: 0.85em
}


/*真珠についてーーーーーーーーーーーーーーーーーーーーーーーーー*/

.about {
    width: 90%;
    margin: auto;
    height: 70vh
}

.about span {
    color: #FF6666;
    padding-right: 0.5em
}


/*------*/

.about01 {
    width: 90%;
    margin: auto;
}

.about01-top table {
    width: 100%;
    margin-bottom: 2em;
   
}

.about01-top table td{
    color: #000099;
    text-align: right;
    font-size: 0.9em;
    width: 50%
}

.about01-intro h4{
    font-weight: bold;
    font-size: 1.2em

}

.about01-intro h4 span {
    color: #ff6666;
    padding-right: 0.5em
}

.about01-intro p {
    font-weight: normal;
    font-size: 0.8em
}

.about01-intro h5 {
    color: #000099;
    text-align: right;
    font-size: 0.9em;
    margin-top: 2em
}

.about01-intro h5 span {
    font-weight: bold;
    font-size: 1.2em;
    padding-right: 0.5em
}

.about01-intro figure img {
    width: 100%
}


.about01-intro table{
    width: 100%;
    margin-bottom: 2em;
}



.about01-intro table th {
    width: 50%;
    margin: auto
}

.about01-intro table td {
    font-size: 0.8em;
    width: 50%
}

.about01-intro table td p {
    font-size: 0.85em;
    padding-left: 3em
}

.about01-intro table td h6 {
    text-align: right;
    font-size: 1.1em
}


/*ーーーーーーーーーーーーーーーーーーーーーー*/

.about02 {
    width: 90%;
    margin: auto
}

.about02 h4 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 1em
}

.about02 h4 span {
    color: #ff6666;
    padding-right: 0.5em
}

.about02 figure {
    width: 80%;
    margin: auto
}
.about02 figure img {
    width: 100%
}

.about02 table {
    width: 100%;
}

.about02 table td {
    width: 50%;
    margin: auto;
    font-size: 0.9em;
    padding-left: 2em
}

.about02 table td figure {
    width: 70%;
    margin: auto
}



.about02-point table th{
    width: 25%;
    text-align: left;
    padding-left: 1em;
    
}

.about02-point table td {
    padding: 1em
}

/*about03ーーーーーーーーーーーーーーーーーーー*/


.about03-main table {
    width:98%;
    margin: auto;
    border-collapse: collapse;
    border: solid 1px;
    font-size: 0.9em
    
}

.about03-main table tr {
    border-bottom: solid 1px
}

.about03-main table th {
    width: 30%;
    border-right: solid 1px
}

.about03-main table td {
    padding: 1em
}


/*お問い合わせーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.contact {
    width: 90%;
    margin: auto
}

.contact table {
    width: 100%
}

.contact table td {
    width: 50%;
    
}

.contact table td img {
    width: 90%;
    
}

/*---------*/

.contact-main {
    width: 90%;
    margin: auto
}

.contact-main01 table {
    width: 100%;
    
}

.contact-main01 table textarea {
    width: 100%;
    height: 10em;
}

/*----------*/
.contact-main03 {
    padding-bottom: 3em
}
.contact-main02 table {
    width: 100%
}

.contact-main02 table th{
    font-size: 0.9em;
    font-weight: normal;
    width: 30%;
    text-align: left
}



.contact-main02 table span {
    font-size: 0.8em;
    color: #FF0000
}

.contact-main03 table {
    width: 100%
}



.contact-main03 table td{
    width: 50%;
    
}

.contact-main03 table input {
    
}














@media screen and (max-width:1000px){
    
  .about01-top table tr{
    display: flex;
      flex-direction: column-reverse
   
}
    
    .about01-top table td {
        width: 100%;
        text-align: center
    }

    
}




@media screen and (max-width:950px) {
    .kako-miz list ul li {
        width: 50%
    }
    
    .about02 table tr {
        display: flex;
        flex-direction: column-reverse
    }
    
    .about02 table td {
        width: 100%;
        padding-left: 0
    }
    
    .about02 table td figure {
        width: 50%;
        margin-top: 1em;
        margin-bottom: 1em
    }
    
    .about02 table tr {
        display: flex;
        flex-direction: column
    }
    
    .about02-point table th {
        width: 100%
    }
    
    
    .contact table tr {
        display: flex;
        flex-direction: column
    }
    
    .contact table td {
        width: 100%;
        margin: auto
    }
    
    .contact table figure {
        width: 80%;
        margin: auto
    }
    
    .contact table td img {
        width: 100%;
        margin-bottom: 1em
    }
    
    
    
}



@media screen and (max-width:800px){
    
    .about01-intro table tr{
        display: flex;
        flex-direction: column
    
    }



.about01-intro table th {
    width: 50%;
    margin: auto
}

.about01-intro table td {
    font-size: 0.8em;
    width: 100%;
    margin-top: 2em
   
}
    
    .contact-main02 table tr{
        display: flex;
        flex-direction: column
    } 
    
        
    .contact-main02 table th {
        width: 100%
    }
    
    
    
}













@media screen and (max-width: 600px) {
    #main-item {
        font-size: 14px
    }
    
    .news {
        font-size: 0.9em
    }
    
    .miz-intro table tr td {
       
        display: flex;
        flex-direction: column
    } 
    
    .miz-intro table tr td figure {
         float: none;
         width: 41%;margin: auto;
    }
    .miz-intro table tr td figure img {
       width: 100%;
        
    }
    
    .kako-miz h4 {
        font-size: 1em
    }
    
    .about01 h4 {
        font-size: 1em
    }
    
    .about02 h4 {
        font-size: 1em
    }
    
    
    
    
    
    
    
    
}

@media screen and (max-width:450px){
    
    .about03-main table {
        border: double
    }
    
   .about03-main table tr {
       border-bottom:double;
       display: flex;
       flex-direction: column
  } 
    
    .about03-main table th {
        width: 100%;
        border-bottom: solid 1px
    }  
    
    
    
    
    
}