@charset "Shift_JIS";

.text1{
    text-align : left;
    width : 100%;
    max-width : 818px;
    height : 245px;
    position : relative;
}
.text2{
    text-align : left;
    width : 100%;
    max-width : 820px;
    margin-top : 4px;
    position : inherit;
}
.text3{
    text-align : left;
    width : 100%;
    max-width : 818px;
    margin-top : 10px;
    position : inherit;
}
.text3 img{
    width : 100%;
}
a.toptextlink1 {
    color : navy;
    text-decoration: none;
    font-size : 12px;
    font-weight : normal;
    font-family : メイリオ, sans-serif;
}
.toptextlink1:hover {
    font-size : 12px;
    color : #ff6e00;
    position : static;
    font-weight : normal;
    text-decoration : underline;
    font-family : メイリオ, sans-serif;
    visibility : visible;
}
a.toptextlink2 {
    color : navy;
    text-decoration: none;
    font-size : 12px;
    font-weight : normal;
    font-family : メイリオ, sans-serif;
    letter-spacing : -1px;
}
.toptextlink2:hover {
    font-size : 12px;
    color : blue;
    position: relative;
    font-weight : normal;
    background-color : #fff0f8;
    text-decoration : underline;
    font-family : メイリオ, sans-serif;
}
.font1{
    font-size : 13px;
    font-family : メイリオ, sans-serif;
    color : #3c3c3c;
}
.font2{
    font-size : 13px;
    font-family : メイリオ, sans-serif;
    color : #3c3c3c;
}
.font3{
    font-size : 11px;
    font-family : Arial;
    color : #3c3c3c;
}
.font4{
    font-size : 11px;
    font-family : メイリオ, sans-serif;
    color : #5a5a5a;
    padding-top : 4px;
    text-align : right;
    line-height : 12px;
}
.font5 {
    font-size : 13px;
    font-family : メイリオ, sans-serif;
    color : #5a5a5a;
    line-height : 20px;
    margin-left : 100px;
    margin-top : 0px;
}
.font6{
    font-size : 13px;
    font-family : メイリオ, sans-serif;
    color : #3c3c3c;
    padding-top : 4px;
}
.font7{
    font-size : 12px;
    font-family : Arial;
    color : #3c3c3c;
    line-height : 14px;
}
.font8{
    font-size : 12px;
    font-family : メイリオ, sans-serif;
    color : #5a5a5a;
    line-height : 16px;
}
.font42{
    font-size : 11px;
    font-family : メイリオ, sans-serif;
    color : #5a5a5a;
    padding-top : 4px;
    text-align : center;
    line-height : 12px;
}

div.main {
    width: 100%;
    max-width: 830px;
    height : 80px;
}
div.main-menu {
    float: left;
    width : 20px;
}
div.main-content1 {
    float: left;
    width : 200px;
    text-align : left;
    visibility : visible;
}
div.main-content2 {
    float: left;
    width : 200px;
    text-align : left;
}
div.main-content3 {
    float: left;
    text-align : left;
    width : 220px;
}
div.main-content4 {
    float: left;
    text-align : left;
    width : 180px;
}
.main {
    margin-top : 0px;
    margin-bottom : 0px;
    margin-left : 0px;
    margin-right : 0px;
    border: none;
    text-algin: center;
    height : 380px;
    position : relative;
    bottom : inherit;
    right : auto;
    z-index : 0;
}
.ta1 {
    width: 550px;
    height: 380px;
    border : 1px solid #7bc4a9;
    margin : 0px 0px 0px 0px;
    float: left;
    text-algin: left;
    bottom : inherit;
    z-index : 20;
}
.ta2 {
    width : 8px;
    height: 380px;
    border: none;
    margin : 0px 0px 0px 0px;
    float: left;
    text-algin: left;
    bottom : inherit;
}
.ta3 {
    width: 260px;
    height: 50px;
    border: none;
    margin : 0px 0px 4px 0px;
    float: left;
    text-algin: left;
    bottom : inherit;
    z-index : -1;
}
.ta3 img{
    width : 100%;
}
.ta4 {
    width : 100%;
    max-width : 818px;
    height: 28px;
    border: none;
    margin : 0;
    float:  none;
}
.ta4 img{
    width : 100%;
}
.ta5 {
    width : 548px;
    height : 207px;
    border : none;
    margin : 0px 5px 0px 2px;
    float: left;
}
.ta6 {
    width: 110px;
    height: 110px;
    border: none;
    margin : 4px 0px 4px 0px;
    float: left;
    text-algin: left;
}
.ta6 img{
width : 100%;
}
.ta7 {
    width: 140px;
    height: 100px;
    border: none;
    margin : 10px 0px 8px 5px;
    float: left;
    text-algin: left;
}


/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){

}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
div.main-menu {
    width: 15px;
}
div.main-content2 {
    width : 170px;
}
div.main-content3 {
    width : 200px;
}
div.main-content4 {
    float: left;
    text-align : left;
    width : 180px;
}
.ta4 {
    width: 750px;
}
.ta5 {
    width : 478px;
    height : 207px;
}
div.main {
    width: 100%;
margin: 0 0 0 7px;
}
.text3 {
margin: 10px 0 0 7px;
}
.text3 img{
    width: 750px;
}
}

/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
div.main { height : auto; }
.text1{ margin-top : 20px; }
.text3{ margin-top : 20px; }
.ta3 {
    width: 100%;
    height: auto;
    margin: 0px 0px 5px 0px;
}
.ta5 {
    width: 100%;
    height: 207px;
    margin: 0px 5px 0px 2px;
}
.ta7 {
    width: calc(100% - 120px);
    height: auto;
    margin : 10px 0px 8px 10px;
}
.font8 { font-size : 4vw; }
div.main-content1,
div.main-content2,
div.main-content3,
div.main-content4 {
width: calc(100% - 20px);
margin: 0 0 0 20px;
}
div.main-content4 {
margin: 0 0 10px 20px;
}
a.toptextlink1,
.toptextlink1:hover,
a.toptextlink2,
.toptextlink2:hover {
    font-size: 4vw;
    line-height: 150%;
}
.font3,
.font4,
.font42 {
    font-size: 3.5vw;
    line-height: 150%;
}
.font1,
.font2,
.font5,
.font6{
    font-size: 4vw;
    line-height: 150%;
}
.font7,
.font8{
    font-size: 3.75vw;
    line-height: 150%;
}
}